/*
Theme Name: TheGrail
Theme URI: https://theholograil.com
Author: The Holograil
Description: Responsive theme for The Holograil — photo booth and event photography. Built as a child theme of Hello Elementor for full Elementor page builder and theme builder support.
Version: 1.1.0
Template: hello-elementor
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thegrail
*/
: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%);
    --shadow-header: 0 4px 32px 0 rgba(0, 0, 0, 0.03), 0 24px 32px -8px rgba(0, 0, 0, 0.07);
    --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;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --max-width: 1440px;
    --content-max-width: 1200px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --container-padding: 80px;
    --section-padding-y: 80px;
    --section-gap: 24px;
}

/* Make service page social-feed match main page carousel layout on
   tablet/mobile widths only (full-bleed horizontal carousel + 50% slides).
   Keep desktop layout using the grid. */
/* Keep the editable Holographic variation pair inside the desktop canvas.
   Its deliberately offset second column needs the same proportional shift at
   both 900px and 1440px; removing that shift makes the row overrun the page. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Elementor's native .e-con container defaults (some via higher-specificity
   combinator selectors like ":is(...) > .e-con") otherwise win the cascade
   over a plain single-class selector here, flattening the floating pill
   header into an edge-to-edge bar. !important forces our design to win,
   consistent with this file's established pattern for overriding Elementor
   Kit/container defaults (see .cta-bar-buttons above). */
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: 58px;
    padding-top: 0;
    padding-bottom: 0;
    max-width: 100%;
    padding-left: 25px;
    padding-right: 44px;
}

/* Desktop nav rhythm fix (2026-07-20): logo, each nav link, and the Contact
   Us button must all sit an equal distance apart, including the two edge
   gaps (logo-to-card-edge, button-to-card-edge) -- previously the container
   used asymmetric edge padding (25px/44px, no rationale for the difference)
   while .site-nav's flex:1 + justify-content:center created two large
   ~169px gaps around a centered nav-list, wholly disconnected from the
   nav-list's own 40px inter-item gap. A single hardcoded gap value isn't
   viable here: .nav-list already has a documented squeeze problem at
   <=1300px (see the gap:16px override below) where the 6-item nav barely
   fits at 40px, so a bigger fixed gap would squeeze even sooner. Using
   `justify-content:space-evenly` across all 7 real items (logo + 5 links +
   button) instead self-computes equal gaps -- including before-first/
   after-last -- from whatever room is actually left at any viewport width,
   so it degrades gracefully instead of overflowing. Getting all 7 into one
   flex row without moving them in the DOM/_elementor_data: make the nav
   shortcode's <nav> and <ul class="nav-list"> (already effectively
   transparent via the shortcode wrapper's own display:contents, set in the
   header widget's custom_css) also display:contents at desktop, so their
   children flatten up to become .container's direct flex children. Scoped
   to >768px so the mobile hamburger nav (which relies on .site-nav's
   flex:1/justify-content:flex-end and .nav-list's real box for the
   dropdown-open state) is completely untouched. Threshold is 900px, not
   769px (the header's own mobile cutoff) -- measured that content actually
   overflows the container in a ~785-800px dead zone right above 768px
   (button poking past the card edge), since space-evenly's gap shrinks to
   0 rather than negative once items don't fit. 900px leaves a safe margin;
   the existing squeeze-relief mechanism below it (untouched) already
   proved it fits down to 769px.

   Refinement (same day): edges were first set via `space-evenly` (padding
   0, so the edge gap self-computed equal to the inter-item gap, ~71px at
   1440px). Follow-up request wanted the edge gap decoupled from that --
   logo-to-card-edge and button-to-card-edge should instead match the
   header's own vertical rhythm (the ~12px == var(--space-3) breathing
   room above/below the logo image within the 58px-tall bar), not the
   (much larger) nav-item gap. Switched to `space-between` (which never
   adds space before-first/after-last) plus an explicit fixed
   padding-left/right of var(--space-3) -- this keeps the 6 inter-item
   gaps self-computed/responsive (still immune to the squeeze problem)
   while making the 2 edge gaps their own fixed, smaller value. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */
    {
    .site-header .container {
        justify-content: space-between;
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        gap: 0;
    }

    /* Leave the contact action at its intrinsic width. The navigation can use
     the remaining responsive space, but the CTA must never be pushed beyond
     the right edge of the header. */
    .site-header .header-cta {
        flex: 0 0 auto;
    }

    /* The native HoloGrail Navigation Elementor widget renders its markup
     inside Elementor's standard `.elementor-widget-container`.  The
     navigation itself is intentionally flattened below so the logo, every
     link, and CTA share this row's `space-between` layout.  Leave that
     wrapper in the box tree and the flattened <li>s inherit a block parent,
     which makes the desktop menu stack vertically.  This is desktop-only:
     the mobile menu needs the wrapper/nav boxes intact for its dropdown. */
    /* Extra `.site-header` ancestor prefix (vs. the bare `.site-nav`/`.nav-list`
     base rules declared further down this file) is not just style --
     those base rules come LATER in source order, so without it they'd win
     the cascade on equal specificity and silently cancel this override. */
}

/* The mobile nav-overlay's widget wrapper renders 0-height on desktop (the
   overlay itself is display:none above 768px) but still counts as a flex
   item in .site-header's column stack, so its row-gap was adding 20px of
   dead space above the nav row. Remove it from flow on desktop; the
   768px media query below re-enables it so mobile menu behavior is unaffected. */
.site-header>.elementor-widget-html {
    display: none;
}

.site-logo {
    flex-shrink: 0;
    padding-top: 14px;
}

.site-header .site-logo {
    /* .site-header's row already vertically centers its children (nav text,
     button); this rule's own 14px top-only padding pushed just the logo
     image down out of that alignment. Footer reuses .site-logo in a
     top-anchored column stack where the 14px is still wanted, so override
     scoped to the header only. */
    padding-top: 0;
}

.site-logo a {
    display: inline-block;
    line-height: 0;
}

.site-logo .logo-img {
    display: block;
    height: 34px;
    width: auto;
    max-height: 34px;
    object-fit: contain;
}

/* At intermediate widths (below this but still above the 768px mobile
   breakpoint where .nav-list is replaced by the hamburger menu), the 6-item
   nav-list (gap:40px + full padding, ~819px needed) doesn't fit the space
   left over after the logo and CTA button (~708-806px depending on width).
   white-space:nowrap above stops the ugly mid-word wrap; this tightens gap
   and padding instead so all 6 items still fit on one line without wrapping
   or overflowing past the CTA button. */
@media (max-width: 1300px) {
    :where(html:not(.hg-page-zoom)) .section-uploads {
        position: relative !important;
    }

    /* extra-specific selector targeting the exact element by data-id to win over other rules */
    :where(html:not(.hg-page-zoom)) .section-uploads [data-id="2ed4ae2"] {
        position: absolute !important;
    }
}

.section-uploads [data-id="2ed4ae2"] .elementor-button {
    color: var(--color-orange);
}

/* Current section in the shortcode-based primary navigation. This mirrors
   the yellow-orange active state in the supplied desktop mockup; the class
   is applied by parts/site-nav.php for both a hub page and its children. */
/* Keep the desktop dropdown open while the pointer crosses its visual gap. */
button,
.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--gradient-cta);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--color-white);
}

.btn:active {
    transform: translateY(0);
}

.header-cta {
    flex-shrink: 0;
}

.header-cta .btn {
    height: 36px;
    padding: 0 20px;
    font-size: var(--text-sm);
    border-radius: var(--radius-btn);
}

/* The rule above never actually reached the button: Elementor's _css_classes
   puts "btn" on the widget WRAPPER div, not on the <a class="elementor-button">
   it renders inside -- so .header-cta .btn always matched the (invisible,
   unstyled) wrapper, while the real element's shape came from the more
   specific site-wide .elementor-widget-button.btn .elementor-button rule
   further down (border-radius: var(--radius-pill), full pill), which
   .header-cta .btn's lower specificity could never beat. Re-declare with
   enough specificity to win, scoped to the header only -- other .btn-class
   Elementor buttons elsewhere (hero CTAs etc.) keep the pill shape. */
.header-cta .elementor-widget-button.btn .elementor-button {
    height: 36px;
    padding: 0 20px;
    font-size: var(--text-sm);
    border-radius: var(--radius-btn);
}

.hero {
    position: relative;
    /* Mockup measurement (ui_png/desktop/Main Landing Page.png): the gap
     between the header and "Introducing The HoloGrail" reads ~11-12px
     tighter than var(--space-8) (32px) was giving here. */
    margin-top: 20px;
    text-align: center;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 40%, #F1F3F7 80%, #F1F3F7 100%);
    padding-bottom: 0;
}

.hero-intro {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.hero-intro .elementor-heading-title {
    font-weight: var(--font-bold) !important;
}

.hero-title {
    margin: 0 0 var(--space-2);
    /* Mockup measurement (ui_png/desktop/Main Landing Page.png): the "Capturing
     Moments, Creating Memories" line renders at ~48px, not 52px. */
    font-size: clamp(var(--text-3xl), calc(var(--hg-page-w, 100vw) * 5 / 100), 3rem);
    font-weight: var(--font-medium);
    line-height: 1.2;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title-line {
    display: block;
}

.hero-title-line--indent {
    padding-left: 0.4em;
}

.hero-title-sans {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
}

.hero-title-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
}

.hero-desc {
    margin: 0 auto var(--space-8);
    max-width: 460px !important;
    /* Mockup measurement (ui_png/desktop/Main Landing Page.png): the
     subheading paragraph renders at ~1rem, not the 1.125rem an earlier
     "too small vs Figma" pass bumped it to — that bump overshot. */
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.hero-desc .elementor-heading-title {
    font-weight: normal;
}

.hero-cta {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-12) !important;
}

.hero-cta .btn {
    padding: 12px 28px;
    border-radius: var(--radius-btn);
}

.hero-gallery {
    position: relative;
    max-width: 1000px;
    height: 420px !important;
    margin: 0 auto;
    padding: 0 !important;
    overflow: hidden;
    /* One curve for the whole visible gallery strip (not per-image) — clips
     this fixed-size viewport, not the scrollable track inside it, so the
     curve's 0%/100% edges always line up with the gallery's actual left/
     right edges no matter how the track is scrolled underneath it.
     Depth matched back down to roughly what thegrail-nonelementor's own
     hero-gallery-curve SVG actually draws (~document its curve reaches
     about 27px into a 420px-tall track at its deepest point, edges barely
     touched) — 26% read as far too aggressive next to that reference.
     Sine/smoothstep both turned out to be the wrong family of curve —
     what's actually wanted is a single true circular arc, i.e. the shape
     you get slicing a horizontal chord across one circle. Computed from
     circle geometry directly: chord = gallery width (1000px design
     width), sagitta (depth at the very center) = 40px, giving radius
     R=(chord²/4 + sagitta²) / (2·sagitta) ≈ 3145px — a circle much wider
     than the gallery itself, so only a shallow, gently-curved slice of it
     is visible. y(x) = sqrt(R² − x²) − (R − sagitta) for x = horizontal
     distance from center, converted to a percentage of the 420px height.
     This is genuinely smooth (no cusp, unlike sqrt(sin)) since a circle's
     tangent is horizontal exactly at its own leftmost/rightmost point,
     which is where this arc's endpoints sit. The arc now starts at 0% on
     both sides, so the legacy wave widget cannot leave an additional blank
     strip above the image; only the intended shallow centre curve remains. */
    clip-path: polygon(0% 0%, 3.12% 1.16%, 6.25% 2.24%, 9.38% 3.25%, 12.5% 4.18%, 15.62% 5.04%,
            18.75% 5.82%, 21.88% 6.52%, 25% 7.15%, 28.12% 7.71%, 31.25% 8.19%,
            34.38% 8.6%, 37.5% 8.93%, 40.62% 9.19%, 43.75% 9.38%, 46.88% 9.49%,
            50% 9.52%, 53.12% 9.49%, 56.25% 9.38%, 59.38% 9.19%, 62.5% 8.93%,
            65.62% 8.6%, 68.75% 8.19%, 71.88% 7.71%, 75% 7.15%, 78.12% 6.52%,
            81.25% 5.82%, 84.38% 5.04%, 87.5% 4.18%, 90.62% 3.25%, 93.75% 2.24%,
            96.88% 1.16%, 100% 0%,
            100% 100%, 0% 100%);
}

/* No longer used for rendering (superseded by the clip-path polygon on
   .hero-gallery above) — left inert rather than removing the widget/data,
   0x0 so it has no visual footprint either way. */
.hero-gallery-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--space-4);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Without this, iOS's native rubber-band bounce at the right edge keeps
       re-asserting its own scrollLeft every frame during the bounce-back
       animation, fighting main.js's loop reset (scrollLeft = 0) — the track
       visibly gets stuck at the end until the bounce fully settles, which
       reads as "swipe to the end never loops". Containing overscroll removes
       that bounce so our reset wins immediately. */
    overscroll-behavior-x: contain;
    height: 420px !important;
    padding: 0 !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.hero-gallery-track:active {
    cursor: grabbing;
}

.hero-gallery-track::-webkit-scrollbar {
    display: none;
}

/* Ensure the theme's PHP-rendered hero (parts/section-hero.php) breaks out of
   the centered .container on service pages and other templates where the
   hero should run edge-to-edge. Mirrors the Elementors' breakout rules so the
   horizontal track can use the full viewport width. */
.section.hero .container>.hero-gallery {
    width: var(--hg-page-w, 100vw) !important;
    max-width: var(--hg-page-w, 100vw) !important;
    position: relative;
    left: 50%;
    margin-left: calc(var(--hg-page-w, 100vw) / -2) !important;
    margin-right: calc(var(--hg-page-w, 100vw) / -2) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Mobile: cancel the container's inline gutters (uses --container-padding). */
@media (max-width: 767px) {
    .section.hero .container>.hero-gallery {
        left: 0 !important;
        margin-left: calc(-1 * var(--container-padding)) !important;
        margin-right: calc(-1 * var(--container-padding)) !important;
    }

    .section.hero .container>.hero-gallery .hero-gallery-track {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        --padding-left: 0px !important;
        --padding-right: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
    }
}

/* Tablet and up: make sure nested track uses full viewport width where needed. */
@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .section.hero .container>.hero-gallery .hero-gallery-track {
        width: var(--hg-page-w, 100vw) !important;
        max-width: var(--hg-page-w, 100vw) !important;
        position: relative !important;
        left: calc(50% - calc(var(--hg-page-w, 100vw) / 2)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.hero-gallery-item {
    padding: 0 !important;
    flex: 0 0 auto;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    min-width: 320px;
    position: relative;
    display: block;
}

.hero-gallery-item img,
.hero-gallery-item video {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.section {
    padding: var(--section-padding-y) 0;
}

.section-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), calc(var(--hg-page-w, 100vw) * 3 / 100), var(--text-3xl));
    font-weight: var(--font-bold);
    color: var(--color-orange);
}

.section-desc {
    margin: 0 0 var(--section-gap);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 600px !important;
}

.section-uploads .section-title {
    margin-bottom: var(--section-gap);
}

.section-features--grey {
    background: #F1F3F7;
    overflow-x: hidden;
}

.features-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-12);
    align-items: center;
    margin-bottom: var(--space-10);
}

.features-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.features-list li:last-child {
    margin-bottom: 0;
}

.features-list .icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.features-list .text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.features-split-text {
    max-width: 720px;
}

.section-title--features {
    margin-bottom: var(--space-8);
    /* Client feedback (FEEDBACK-CHECKLIST.md, Main Page #3): headings site-
     wide read too small vs Figma; bumped this and the sibling
     section-title--offer/--brands/hero-title/contact-info-title/
     elementor-icon-box-title/section-desc rules on the homepage
     specifically (not the shared --text-* scale, to avoid rippling into
     the many already-mockup-verified service pages). */
    font-size: 3rem;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title--features .section-title-line {
    display: block;
}

.section-title--features em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
}

.section-desc--features {
    max-width: 65% !important;
    margin-top: 0;
    margin-bottom: 0;
    /* Client feedback (Main Page #3): body text too small vs Figma. */
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--color-text);
}

.section-desc--features .elementor-heading-title {
    font-weight: normal;
    line-height: 1.4;
}

.elementor-heading-title.elementor-size-default {
    line-height: 1.4;
}

.section-title--offer {
    margin: 0 0 clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 2 / 100), 2.25rem);
    /* Client feedback (Main Page #3): headings too small vs Figma. */
    font-size: clamp(2.25rem, calc(var(--hg-page-w, 100vw) * 3.4 / 100), 3.25rem);
    font-weight: var(--font-normal);
    line-height: 1.2;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
}

.section-title--offer .section-title-line {
    display: block;
}

.section-title--offer em {
    font-family: var(--font-serif);
    font-style: italic;
}

.section-offer .container {
    display: flex;
    flex-direction: column;
}

.offer-split {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: 0;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.offer-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    min-height: 420px;
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-right: 0;
    padding-right: 0;
}

.offer-tile {
    --offer-tile-size: 200px;
    width: var(--offer-tile-size);
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    position: relative;
}

.offer-tile--2 {
    margin-top: calc(-1 * var(--offer-tile-size) / 5);
    margin-left: calc(var(--offer-tile-size) * 0.55);
}

.offer-tile--3 {
    margin-top: calc(-1 * var(--offer-tile-size) / 9);
    margin-left: calc(var(--offer-tile-size) * 0.15);
}

.offer-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-tile {
    position: relative;
}

.offer-tile--1 {
    border: 4px solid #f8d4e0;
    z-index: 1;
    transform: rotate(5deg);
}

.offer-tile--2 {
    border: 4px solid var(--color-pink);
    z-index: 2;
    transform: rotate(25deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 24px rgba(255, 255, 255, 1);
}

.offer-tile--3 {
    border: 4px solid var(--color-blue);
    z-index: 1;
    transform: rotate(-10deg);
}

/* The offer photos run edge-to-edge: no coloured frame, and each Elementor
   image wrapper fills the rotated tile while inheriting its corner radius. */
.offer-tile--1,
.offer-tile--2,
.offer-tile--3 {
    border: none !important;
}

.offer-tile>.elementor-widget-image,
.offer-tile>.elementor-widget-image .elementor-widget-container,
.offer-tile>.elementor-widget-image .elementor-image,
.offer-tile>.elementor-widget-image .elementor-image a {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
    overflow: hidden;
}

.offer-tile>.elementor-widget-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: inherit;
}

.offer-content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.offer-cards {
    flex: 1;
    min-width: 0;
}

.offer-card {
    display: none;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    padding: clamp(1.25rem, calc(var(--hg-page-w, 100vw) * 2 / 100), 1.75rem);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.offer-card--active {
    display: block;
}

.offer-card .elementor-testimonial-content {
    color: var(--color-text);
}

.offer-card .elementor-testimonial-name {
    color: var(--color-text) !important;
    font-weight: var(--font-semibold);
}

.offer-card .elementor-testimonial-job {
    color: var(--color-text-muted);
}

.offer-prev,
.offer-next {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-card);
    cursor: pointer;
    font-size: var(--text-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.offer-prev .elementor-icon,
.offer-next .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.offer-prev {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-secondary);
}

.offer-next {
    background: var(--color-blue);
    color: var(--color-white);
}

.offer-prev:hover,
.offer-next:hover {
    opacity: 0.9;
}

.offer-prev .elementor-icon svg,
.offer-next .elementor-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.offer-next .elementor-icon svg {
    fill: var(--color-white);
}

.section-brands {
    text-align: center;
}

.section-title--brands {
    margin-bottom: var(--space-8);
    /* Client feedback (Main Page #3/#15): heading too small, and font color
     too pale vs Figma's brighter pink/orange gradient (font-weight bumped
     too since Figma's is visibly bolder than this section's other
     titles). */
    font-size: 3rem;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title--brands .section-title-line {
    display: block;
}

.section-title--brands em {
    font-family: var(--font-serif);
    font-style: italic;
}

/* The social carousel in the desktop reference reaches the viewport edges.
   Keeping four visible slides makes each image materially larger than it is
   inside the standard content-width container. */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

.contact-form-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-8);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}

.contact-form {
    width: 100%;
}

.elementor-widget-form .elementor-field-group {
    margin-bottom: var(--space-3);
}

.elementor-widget-form .elementor-field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.elementor-widget-form .elementor-field-textual,
.elementor-widget-form textarea.elementor-field-textual {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: #fff;
    box-sizing: border-box;
    line-height: 1.5;
}

.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form textarea.elementor-field-textual:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(241, 174, 17, 0.12);
}

.elementor-widget-form .elementor-button {
    margin-top: var(--space-4);
    border-radius: var(--radius-btn);
    box-shadow: 0 8px 24px rgba(242, 106, 170, 0.18);
}

.contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-info-title {
    font-size: clamp(var(--text-2xl), calc(var(--hg-page-w, 100vw) * 3 / 100), var(--text-3xl));
    font-weight: var(--font-normal);
    line-height: 1.25;
    text-align: center;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.contact-info-title .section-title-line {
    display: block;
}

.contact-info-title em,
.section-contact .elementor-heading-title em {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
}

.contact-info-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
    text-align: center;
}

.contact-info-direct {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-info-direct-label {
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0;
    text-align: center;
}

.contact-info-direct-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
}

.contact-info-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color .2s, box-shadow .2s;
    /* Grid items default to min-width:auto, which respects their content's
     intrinsic minimum size (here, the unbroken "hello@theholograil.com"
     string) even inside a 1fr 1fr track -- so the Email column was rendering
     wider than Phone instead of a true 50/50 split. min-width:0 lets the
     column shrink to its assigned 1fr share; the email wraps/truncates
     instead of forcing the grid to expand around it. */
    min-width: 0;
    flex-wrap: wrap;
    width: 100%;
}

.contact-channel>span:not(.contact-channel-icon) {
    min-width: 0;
    flex: 1 1 0;
}

.contact-channel-label,
.contact-channel-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-channel-value {
    white-space: normal;
}

.contact-channel:hover {
    border-color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.contact-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.contact-channel-icon svg {
    width: 18px;
    height: 18px;
}

.contact-channel-icon--email {
    background: #f0f4ff;
    color: #4a6cf7;
}

.contact-channel-icon--whatsapp {
    background: #e8f8ef;
    color: #25d366;
}

.contact-channel-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.contact-channel-value {
    display: block;
    font-size: 12px;
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.contact-social-follow {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    text-align: center;
}

.contact-social-follow-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.contact-social-follow-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.contact-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    transition: background .2s, color .2s;
}

.contact-social-icon:hover {
    background: #595959;
    color: var(--color-white);
}

.contact-social-icon svg {
    width: 18px;
    height: 18px;
}

.contact-social-icon .fa-tiktok {
    font-size: 18px;
    line-height: 1;
}

.section-faq-hero {
    text-align: center;
    padding-bottom: var(--space-8);
}

.faq-hero-title {
    margin: 0 0 var(--space-4);
    font-size: clamp(var(--text-2xl), calc(var(--hg-page-w, 100vw) * 4 / 100), var(--text-4xl));
    font-weight: var(--font-bold);
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.faq-hero-desc {
    margin: 0 auto;
    max-width: 640px !important;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
}

body .faq-hero-desc .elementor-heading-title {
    font-weight: var(--font-normal, 400);
}

.section-faq-accordion {
    padding-top: 0;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- Elementor native Accordion widget bridge (real markup uses
   .elementor-accordion/.elementor-accordion-item/.elementor-tab-title/
   .elementor-tab-content, not the .faq-accordion-* classes above, which
   were written for an old hand-authored version never actually used) --- */
.faq-accordion .elementor-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.faq-accordion .elementor-accordion-item {
    background: var(--color-white);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.faq-accordion .elementor-accordion-item:has(.elementor-active) {
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        linear-gradient(90deg, #F1AE11 0%, #F26AAA 100%) border-box;
}

.faq-accordion .elementor-tab-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6) !important;
    font-weight: var(--font-semibold);
    color: var(--color-text) !important;
    background: none !important;
    border: none !important;
}

.faq-accordion .elementor-accordion-title {
    order: 1;
}

.faq-accordion .elementor-accordion-icon {
    order: 2;
    margin-left: auto;
}

.faq-accordion .elementor-tab-title.elementor-active {
    color: var(--color-text) !important;
}

.faq-accordion .elementor-accordion-title,
.faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
    color: var(--color-text) !important;
}

.faq-accordion .elementor-accordion-icon,
.faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
    color: var(--color-text-muted) !important;
}

.faq-accordion .elementor-accordion-icon svg,
.faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
    fill: var(--color-text-muted) !important;
}

/* Keep one plus glyph in the DOM and rotate it into an X when its panel is
   open. This avoids Elementor's abrupt plus/minus icon swap. */
.faq-accordion .elementor-accordion-icon {
    position: relative;
}

.faq-accordion .elementor-accordion-icon-closed {
    display: block !important;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 240ms ease;
    will-change: transform;
}

.faq-accordion .elementor-accordion-icon-opened {
    display: none !important;
}

.faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-accordion .elementor-accordion-icon-closed {
        transition: none;
    }
}

.faq-accordion .elementor-tab-content {
    margin: 0;
    padding: 0 var(--space-6) var(--space-5) !important;
    font-size: var(--text-base);
    color: var(--color-text-muted) !important;
    line-height: 1.65;
    border: none !important;
}

.section-faq-preview {
    padding-top: 0;
    padding-bottom: 0;
}

.faq-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: stretch;
}

.faq-preview-text {
    max-width: 520px;
    align-content: center;
    justify-content: center;
}

.faq-preview-title {
    margin-bottom: var(--space-3);
    font-size: clamp(var(--text-2xl), calc(var(--hg-page-w, 100vw) * 2.5 / 100), var(--text-3xl));
    font-weight: var(--font-bold);
    max-width: 75% !important;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.faq-preview-desc {
    margin-bottom: 0;
}

.faq-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

@media (min-width: 768px)
/* hg-zoom A12: was 1024px */
    {
    .faq-preview-actions {
        flex-wrap: nowrap;
    }
}

.faq-preview-btn-primary,
.faq-preview-btn-secondary {
    border-radius: var(--radius-btn);
    background: var(--color-white);
    color: var(--color-blue);
    border: 1px solid var(--color-border);
    padding-inline: var(--space-5);
    gap: var(--space-3);
}

.faq-preview-btn-primary,
.faq-preview-btn-primary .elementor-button {
    border: 0 !important;
}

.faq-preview-btn-primary:hover,
.faq-preview-btn-secondary:hover {
    opacity: 0.85;
}

.faq-preview-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-3);
    height: 420px;
    margin-left: auto;
}

/* The desktop preview is a flush, fixed-height collage. Elementor's flex
   containers otherwise retain vertical padding/spacing around this grid. */
.faq-preview-card {
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    display: block;
}

.faq-preview-card-image {
    width: 100%;
    height: 100%;
}

.faq-preview-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.faq-preview-card--primary {
    grid-column: 1;
    grid-row: 1 / 3;
}

.faq-preview-card--secondary {
    grid-column: 2;
    grid-row: 1;
}

.faq-preview-card--tertiary {
    grid-column: 2;
    grid-row: 2;
}

.faq-preview-card--compact {
    display: none;
}

@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .faq-preview-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-text {
        max-width: 100%;
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-media {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    :where(html:not(.hg-page-zoom)) .faq-preview-media {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-card--primary {
        grid-column: 1;
        grid-row: auto;
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-card--secondary {
        grid-column: 1;
        grid-row: auto;
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-card--tertiary {
        grid-column: 1;
        grid-row: auto;
    }

    :where(html:not(.hg-page-zoom)) .faq-preview-card-image {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 480px) {
    .faq-preview-actions {
        flex-direction: column;
    }

    .faq-preview-btn-primary,
    .faq-preview-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

.blog-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.blog-card .thumb {
    aspect-ratio: 16/10;
    background: #e8e8e8;
}

.blog-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card .content {
    padding: var(--space-5);
}

.blog-card .meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.blog-card .title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.blog-card .title a:hover {
    color: var(--color-orange);
}

.blog-card .excerpt {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.blog-card .link {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-orange);
}

.blog-card .link:hover {
    text-decoration: underline;
}

.site-footer {
    background: var(--color-blue-dark);
    color: var(--color-white);
    margin-top: auto;
}

.footer-inner {
    padding: 48px 0 24px;
}

.footer-inner .container {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: var(--space-8);
}

.footer-logo .site-logo a {
    -webkit-text-fill-color: var(--color-white);
    background: none;
}

.footer-logo .tagline {
    margin: var(--space-3) 0 var(--space-4);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    max-width: 280px !important;
}

body .tagline .elementor-heading-title {
    font-weight: var(--font-normal, 400);
}

.footer-social {
    padding-bottom: 48px;
    --icon-size: 13px;
}

.footer-social .elementor-social-icons-wrapper {
    --grid-column-gap: 16px;
}

.footer-social .elementor-icon.elementor-social-icon {
    background: var(--color-icon-bg) !important;
}

.footer-social .elementor-icon.elementor-social-icon:hover,
.footer-social .elementor-icon.elementor-social-icon:focus-visible {
    background: #595959 !important;
    opacity: 1 !important;
}

.footer-col h4 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
}

.footer-spacer-mobile {
    padding-bottom: 32px;
}

.footer-spacer-mobile-2 {
    padding-bottom: 16px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: var(--space-2);
}

.footer-col a {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-sm);
}

.footer-col a:hover {
    color: var(--color-white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-5) 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.footer-bottom a:hover {
    color: var(--color-white);
}

.footer-bottom .elementor-heading-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    font-weight: 400;
}

@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .section-features .container {
        grid-template-columns: 1fr;
    }

    :where(html:not(.hg-page-zoom)) .offer-split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    :where(html:not(.hg-page-zoom)) .section-offer {
        overflow-x: hidden;
    }

    :where(html:not(.hg-page-zoom)) .offer-visual {
        width: var(--hg-page-w, 100vw);
        margin-left: calc(50% - calc(var(--hg-page-w, 100vw) / 2));
        align-items: center;
    }

    :where(html:not(.hg-page-zoom)) .footer-inner .container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Mobile header chrome (2026-07-21): this breakpoint is 899px, not 768px like
   the rest of this shared media query below -- it must line up with the
   `@media (min-width: 900px)` desktop-nav fix above (`.site-header .container`
   display:contents flattening), not with the site's general mobile cutoff.
   Confirmed via getBoundingClientRect sweep that the full desktop nav row
   (real .site-nav/.nav-list box, not yet flattened) overflows the header
   card by up to 161px at 769px, tapering to 31px at 899px -- there was no
   viewport width between the old 768px hamburger cutoff and the 900px
   desktop fix where the header rendered correctly. Moving the hamburger
   cutoff up to meet the 900px fix closes that dead zone by reusing the
   already-correct mobile nav instead of trying to squeeze a 6-item nav
   into as little as 359px of available width. See PLAN-LIST-REMAINING-GAP.md
   gap #3. Kept as its own block (rather than folded into the max-width:768px
   block right below) so the two thresholds don't get accidentally reunified
   by a future edit to one without the other. */
@media (max-width: 899px) {
    :where(html:not(.hg-page-zoom)) .header-cta {
        display: none;
    }

    :where(html:not(.hg-page-zoom)) .site-header .container {
        position: relative;
        z-index: 100;
        height: 70px;
        padding-left: 22px;
        padding-right: 0px;
    }

    :where(html:not(.hg-page-zoom)) .site-logo .logo-img {
        height: 44px;
        max-height: 44px;
    }
}

@media (max-width: 768px) {
    :root:where(:not(.hg-page-zoom)) {
        --container-padding: 20px;
        --section-padding-y: 48px;
    }

    :where(html:not(.hg-page-zoom)) .hero {
        padding: var(--space-8) 0 10px;
    }

    :where(html:not(.hg-page-zoom)) .section {
        padding: var(--section-padding-y) 0;
    }

    :where(html:not(.hg-page-zoom))

    /* "Our recommended..." bento (Home + About Us clone): mobile mockup shows only
     the Holographic Magic banner + 2 cards (Photo Booth, Luggage Tag) + the View
     All Services button, :where(html:not(.hg-page-zoom)) not the full 8-card/3-category desktop grid. Hide the
     rest at mobile so the section matches the intended short preview instead of
     stacking all 3 desktop columns end-to-end (~4700px). See PLAN-LIST-REMAINING-GAP.md
     Temuan #8. IDs listed per-instance since only specific cards are hidden, :where(html:not(.hg-page-zoom)) not
     the whole class. */
    .elementor-element-d7775b9,
    :where(html:not(.hg-page-zoom)) .elementor-element-90b5cbb,
    :where(html:not(.hg-page-zoom)) .elementor-element-47d2ae6,
    :where(html:not(.hg-page-zoom)) .elementor-element-e2d65c7,
    :where(html:not(.hg-page-zoom)) .elementor-element-bf0ea9c,
    :where(html:not(.hg-page-zoom)) .elementor-element-e36ab9e,
    :where(html:not(.hg-page-zoom)) .elementor-element-a3cc3f1,
    :where(html:not(.hg-page-zoom)) .elementor-element-297ee80,
    :where(html:not(.hg-page-zoom)) .elementor-element-1cecf51,
    :where(html:not(.hg-page-zoom)) .elementor-element-18d144,
    :where(html:not(.hg-page-zoom)) .elementor-element-9531a9,
    :where(html:not(.hg-page-zoom)) .elementor-element-f31b61,
    :where(html:not(.hg-page-zoom)) .elementor-element-f83b7d,
    :where(html:not(.hg-page-zoom)) .elementor-element-85ba91,
    :where(html:not(.hg-page-zoom)) .elementor-element-ef5d62,
    :where(html:not(.hg-page-zoom)) .elementor-element-7ada4c,
    :where(html:not(.hg-page-zoom)) .elementor-element-117227,
    :where(html:not(.hg-page-zoom)) .elementor-element-7874d6 {
        display: none !important;
    }

    :where(html:not(.hg-page-zoom)) .contact-info-channels {
        grid-template-columns: 1fr;
    }

    :where(html:not(.hg-page-zoom)) .offer-tile {
        --offer-tile-size: 140px;
        width: 140px;
    }

    :where(html:not(.hg-page-zoom)) .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    :where(html:not(.hg-page-zoom)) .contact-info {
        order: -1;
    }

    :where(html:not(.hg-page-zoom)) .contact-info-title {
        text-align: center;
    }

    :where(html:not(.hg-page-zoom)) .contact-info-desc {
        text-align: center;
    }

    :where(html:not(.hg-page-zoom)) .features-split {
        grid-template-columns: 1fr;
    }

    :where(html:not(.hg-page-zoom)) .section-desc--features {
        max-width: 100%;
    }

    :where(html:not(.hg-page-zoom)) .footer-inner .container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    :where(html:not(.hg-page-zoom)) .footer-col-spacer {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 16px;
    }

    .site-header .container {
        padding-left: var(--space-4);
        padding-right: 8px !important;
        gap: var(--space-3);
    }

    .offer-tile {
        --offer-tile-size: 110px;
        width: 110px;
    }

    .footer-inner .container {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        text-align: center;
    }

    .footer-logo .tagline {
        max-width: none;
    }

    .footer-social {
        justify-content: center;
    }
}

/* 899px to match the mobile-header-chrome block above (2026-07-21 breakpoint
   move) -- this whole block is the hamburger dropdown itself, so it must
   activate at exactly the same width as the hamburger button appearing. */
@media (max-width: 899px) {
    :where(html:not(.hg-page-zoom)) .site-header>.elementor-widget-html {
        /* Must stay in the DOM (it hosts .nav-overlay below) but must NOT
       participate in .site-header's flex column layout on mobile either —
       as a normal in-flow display:block item it still consumed the
       container's 20px gap even at 0 height, adding dead space above the
       logo/hamburger row. position:absolute removes it from flow entirely;
       .nav-overlay itself is already position:fixed so it's unaffected. */
        display: block;
        position: absolute;
        height: 0;
    }
}

.services-hero {
    text-align: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-10);
}

.services-hero-title {
    font-size: clamp(2.5rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 4rem);
    font-weight: var(--font-bold);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-3);
    line-height: 1.15;
}

.services-hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-orange);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-4);
}

.services-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 600px !important;
    margin: 0 auto;
    line-height: 1.7;
}

body .services-hero-desc .elementor-heading-title {
    font-weight: var(--font-normal, 400);
}

.services-grid-section {
    padding-top: var(--space-4);
    padding-bottom: var(--space-16);
}

.services-tabs-wrap {
    display: none !important;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-10);
}

.services-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    max-width: 100%;
}

.services-tab {
    min-height: 50px;
    padding: 12px 22px;
    border-radius: var(--radius-tab);
    border: 2px solid var(--color-border-soft);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.services-tab:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.services-tab.is-active {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        var(--gradient-cta) border-box;
    color: var(--color-orange);
    font-weight: var(--font-semibold);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    /* Same Elementor-default-padding issue as .service-card-media, one level
     up: for cards built as a native Elementor "Image" widget, THIS element
     (not just service-card-media inside it) is itself an Elementor `.e-con`
     container and picks up the default 10px left/right padding — measured
     directly as an 11px white gap between the card border and the image on
     both sides, even after service-card-media's own padding was already
     zeroed. The raw-HTML-widget cards (a plain <a>, not an `.e-con`) were
     never affected, which is why only "most" cards showed this and not
     all. */
    padding: 0 !important;
    /* Same story again, different property: Elementor's `.e-con` default also
     sets `gap: var(--widgets-spacing, 20px)` between a container's direct
     children — here that's the ~21px gap that showed up specifically
     *between* .service-card-media and .service-card-body (siblings, not
     nested inside either one), left over even after all the padding on
     both of them was already zeroed. */
    gap: 0 !important;
}

/* .service-card's own DIRECT e-con-inner child (distinct from the one
   already zeroed inside .service-card-media above — Elementor nests one at
   every .e-con level) carries its own separate `padding: 10px 0px`
   (top/bottom this time, not left/right), from the same
   `.e-con-full, .e-con > .e-con-inner { padding-block-start/end }`
   mechanism — confirmed directly via computed style, still present after
   zeroing .service-card's own padding since these are two different
   elements. This is what put visible space above (and below) the image
   even once the left/right gap was gone. */
.service-card>.e-con-inner,
.service-card .e-con-inner {
    /* Broadened to every .e-con-inner anywhere inside a card, not just the
     specific ones found so far: this same stray-10px-padding wrapper keeps
     turning up at different, inconsistent nesting depths per card (e.g.
     inside .service-card-body for some cards but not others, depending on
     how each one's Elementor widget tree happens to be structured) — one
     card in a row would sit 10px lower than its siblings purely from this,
     making titles/descriptions look vertically misaligned across a row
     even though each is correctly top-anchored on its own. Catching all of
     them here instead of chasing each new location individually. Also
     `gap`, not just padding: .service-card-media and .service-card-body
     turned out to be children of THIS e-con-inner (not direct children of
     .service-card as assumed when .service-card's own gap was zeroed
     above), carrying its own ~20px default gap between them regardless. */
    padding: 0 !important;
    gap: 0 !important;
}

.service-card-name {
    /* Was `var(--space-4) var(--space-3) var(--space-5)` (16px/12px/20px) —
     .service-card-body (below) already pads every side of this whole text
     block, so the top/bottom here was stacking on top of the body's own
     16px/20px rather than replacing it: 36px of pure gap between the image
     and the title, 41px between the description and the card's bottom edge,
     confirmed by direct measurement. Keeping only the horizontal padding
     (line-wrap width) here and letting .service-card-body's padding + gap
     be the single source of vertical spacing. */
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

/* Cards built as a native Elementor "Heading" widget carry .service-card-name
   on the WRAPPING div (for text-align/padding), but the actual visible text
   is the widget's own inner <p class="elementor-heading-title">, which gets
   its own font-weight directly from Elementor's global typography
   (`.elementor-widget-heading .elementor-heading-title{font-weight:var(...)}`,
   same 2-class specificity as a plain descendant selector here, applied
   directly to the element rather than inherited) — that beats the bold set
   on the ancestor regardless of the ancestor's own specificity, since a
   direct match always wins over an inherited value. Only the raw-text-editor
   cards (whose title IS the .service-card-name element, not a descendant of
   it) picked up the ancestor rule's bold correctly, which is why titles were
   inconsistently bold across the grid. */
.service-card-name .elementor-heading-title {
    font-weight: var(--font-semibold) !important;
}

/* No "*new" badge in the mockup on any card — hide rather than strip from
   each widget's stored content individually. */
.service-badge {
    display: none;
}

@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    :where(html:not(.hg-page-zoom)) .services-tabs-wrap {
        margin-bottom: var(--space-8);
    }

    :where(html:not(.hg-page-zoom)) .services-tabs {
        gap: var(--space-2);
    }

    :where(html:not(.hg-page-zoom)) .services-tab {
        padding: 8px 14px;
        font-size: var(--text-xs);
    }

    :where(html:not(.hg-page-zoom)) .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.btn-service-primary {
    min-height: 50px;
    padding: 14px 28px;
    border-radius: var(--radius-card);
}

.service-content-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--space-8);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        var(--gradient-cta) border-box;
}

.service-content-card-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}

.service-content-card-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
}

.service-related-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-related-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.service-card--link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    :where(html:not(.hg-page-zoom)) .service-related-card {
        grid-template-columns: 1fr;
    }
}

.service-card-body {
    /* Trimmed from 16px/16px/20px (top/sides/bottom) — this is now the only
     source of vertical padding around the title+description block (see
     .service-card-name above), so tightened it directly rather than just
     removing the doubled-up half; cards were visibly taller than the
     mockup's proportions. */
    padding: 12px var(--space-4) 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.service-card-desc {
    /* margin-top restores a small gap from the title above: the flex `gap`
     meant to provide that (on .service-card-body) doesn't reach here
     either — title and desc turned out to be inside yet another shared
     .e-con-inner wrapper, whose own gap got zeroed along with all the
     others above, leaving them touching directly. Simpler to add the
     breathing room directly on this element than chase which specific
     wrapper's gap needs to be un-zeroed without affecting the others. */
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: #403E3E;
    line-height: 1.55;
    text-align: center;
}

/* Same wrapper-vs-actual-text split as .service-card-name: cards built as
   a native Elementor "Heading" widget carry .service-card-desc on the
   wrapping div, but the visible text is the widget's own inner
   <p class="elementor-heading-title">, which doesn't inherit text-align
   from the ancestor for the same reason font-weight didn't — Elementor's
   own heading styles apply directly to the element. */
.service-card-desc .elementor-heading-title {
    text-align: center !important;
}

.service-card>.service-card-name {
    padding: var(--space-4);
    margin: 0;
}

/* 899px, matching the 2026-07-21 hamburger-breakpoint move above. */
.service-card[style*="display: none"] {
    display: none !important;
}

@media (max-width: 640px) {
    .services-tabs {
        gap: var(--space-2);
    }

    .services-tab {
        padding: 10px 14px;
        font-size: var(--text-xs);
        min-height: 42px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 400px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.offer-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

.section-title--offer {
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title-line--orange {
    color: var(--color-orange);
}

.section-title-line--pink {
    color: var(--color-pink);
}

.blog-hero {
    text-align: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
}

.blog-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 4rem);
    font-weight: var(--font-bold);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-3);
    line-height: 1.15;
}

.blog-hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-orange);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-4);
}

.blog-hero-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 600px !important;
    margin: 0 auto;
    line-height: 1.7;
}

body .blog-hero-desc .elementor-heading-title {
    font-weight: var(--font-normal, 400);
}

.blog-featured {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
}

.blog-featured-card {
    display: flex;
    gap: var(--space-10);
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.blog-featured-thumb {
    flex: 0 0 40%;
    min-height: 280px;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.blog-featured-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-featured-content {
    flex: 1;
    padding: var(--space-10) var(--space-8) var(--space-10) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}

.blog-featured-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}

.blog-featured-title a {
    color: var(--color-text);
}

.blog-featured-title a:hover {
    color: var(--color-orange);
}

.blog-featured-excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0;
}

.blog-featured-excerpt p {
    margin: 0;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.blog-meta-date,
.blog-meta-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.blog-meta-cat a {
    color: var(--color-text-muted);
}

.blog-meta-cat a:hover {
    color: var(--color-orange);
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.blog-read-more:hover {
    color: var(--color-orange);
}

.blog-latest {
    padding-top: var(--space-4);
    padding-bottom: var(--space-20);
}

.blog-latest-label {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-orange);
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.blog-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.blog-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.blog-card-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-card-content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.blog-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: 1.35;
    margin: 0;
    color: var(--color-text);
}

.blog-card-title a {
    color: var(--color-text);
}

.blog-card-title a:hover {
    color: var(--color-orange);
}

@media (max-width: 900px) {
    :where(html:not(.hg-page-zoom)) .blog-featured-card {
        flex-direction: column;
    }

    :where(html:not(.hg-page-zoom)) .blog-featured-thumb {
        flex: none;
        min-height: 220px;
    }

    :where(html:not(.hg-page-zoom)) .blog-featured-content {
        padding: var(--space-6);
    }

    :where(html:not(.hg-page-zoom)) .blog-featured-title {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 640px) {
    .blog-hero-title {
        font-size: 2rem;
    }
}

.service-card-media {
    width: 100%;
    /* Confirmed against the mockup (Services (ALL).png) directly: every card
     across all rows — including video ones like Glambot — uses a square
     image area, not this 3:4 portrait box. The mismatch (a ~195px-square
     Elementor image widget centered in a ~195x287 portrait box) was the
     real cause of the visible gap under several cards' images, not a flex
     layout bug — no CSS override needed once the box itself is the right
     shape. */
    aspect-ratio: 1 / 1;
    background: var(--color-surface-muted);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    /* Cards built as a native Elementor "Image" widget are also an Elementor
     `.e-con` container, which gets Elementor's own default 10px padding on
     all sides (frontend.min.css, `.e-con{padding-inline-*:var(...,10px)}`
     etc.) unless overridden — visible as a grey inset border around those
     cards' photos, while the raw-HTML-widget cards (no `.e-con` involved)
     sit flush. !important since Elementor's own padding rule is also just
     one class of specificity and loads after this file in a few of its
     split stylesheets. */
    padding: 0 !important;
}

/* The img/video inside had no sizing rule of its own, so each one rendered
   at its natural intrinsic size instead of filling this 3:4 box: portrait
   photos (e.g. vintage-newspaper-photo-booth, 819x1019) came out shorter
   than the container, leaving a visible gap at the bottom; videos came out
   taller and just got silently cropped by overflow:hidden above. Forcing
   both to fill + cover makes every card's media consistent regardless of
   its source file's own aspect ratio. */
.service-card-media img,
.service-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The img/video fill rule above only works if its ancestor chain actually
   has a definite height to be 100% OF — for native-Elementor-widget cards
   that chain is .e-con-inner > .elementor-widget-image > a, and none of
   them had one, so `height:100%` on the image fell back to `auto` (CSS
   spec: percentage height against a non-definite-height parent computes as
   auto) and each image rendered at its own intrinsic aspect ratio instead
   (measured up to 390px tall inside a 215px box, overflow-clipped).
   Separately, .e-con-inner has its own 10px top/bottom padding from a
   *different* Elementor rule than the one .service-card-media's own
   padding:0 above overrides (`.e-con-full, .e-con > .e-con-inner
   { padding-block-start/end: var(...,10px) }`), which was never touched by
   that fix — hence the residual gap along the top edge specifically. */
.service-card-media .e-con-inner,
.service-card-media .elementor-widget-image,
.service-card-media .elementor-widget-html,
.service-card-media a {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

.brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    margin-top: var(--space-10);
}

@media (max-width: 1280px) {
    :where(html:not(.hg-page-zoom)) .brands-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

@media (max-width: 980px) {
    :where(html:not(.hg-page-zoom)) .brands-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 840px) {
    :where(html:not(.hg-page-zoom)) .brands-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
}

@media (max-width: 640px) {
    .brands-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        justify-content: center;
        gap: var(--space-3);
        margin-left: auto;
        margin-right: auto;
    }

    .brands-grid>*:nth-child(odd):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 140px;
    }
}

.service-holo-before-after {
    background: var(--color-surface-muted);
}

/* ==========================================================================
   GLOBAL UTILITIES (Phase 1)
   ========================================================================== */
/* U2: Holographic Theme Dark Mode */
/* U3: Iridescent glow shift */
@keyframes iridescent-shift {
    0% {
        box-shadow: 0 0 20px 2px rgba(180, 100, 255, 0.3), 0 0 40px 4px rgba(100, 200, 255, 0.15);
    }

    50% {
        box-shadow: 0 0 25px 4px rgba(100, 200, 255, 0.4), 0 0 45px 6px rgba(180, 100, 255, 0.25);
    }

    100% {
        box-shadow: 0 0 20px 2px rgba(180, 100, 255, 0.3), 0 0 40px 4px rgba(100, 200, 255, 0.15);
    }
}

/* U4: Full-bleed Utility */
.alignfull,
.alignfull img,
.offer-visual {
    max-width: var(--hg-page-w, 100vw);
    box-sizing: border-box;
}

/* ================================================================
   B4: CTA Bar Section
   ================================================================ */
/* Overrides Elementor Kit's default heading color (var(--e-global-color-primary), a stray blue) that otherwise wins over single-class wrapper color rules via inheritance.
   `body` prefix added (2026-07-10) so this out-specifies the identical-selector rule that ProElements Loop Grid inlines per render as a <style> block in the body — that inline block sits after thegrail-original.css in the DOM, so same-specificity source-order alone no longer wins here. */
body .elementor-widget-heading .elementor-heading-title {
    color: inherit;
}

/* Heading widgets render descriptions as <p>. Their default text must remain
   normal; semantic H1–H6 and later component title rules stay untouched. */
body .elementor-widget-heading p.elementor-heading-title {
    font-weight: var(--font-normal, 400);
}

/* Typography Utilities */
.title-gradient {
    background: linear-gradient(90deg, var(--color-orange), var(--color-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline;
}

/* A gradient is often applied directly to a semantic heading.  Keep those
   headings inline-sized for the text effect, but let their vertical margins
   participate in layout so the intended title-to-copy spacing is preserved. */
h1.title-gradient,
h2.title-gradient,
h3.title-gradient,
h4.title-gradient,
h5.title-gradient,
h6.title-gradient {
    display: inline-block;
}

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.italic {
    font-style: italic;
}

/* --- Elementor Native Widgets Compatibility --- */
.brands-grid .elementor-widget-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: var(--space-4) var(--space-3);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .brands-grid .elementor-widget-image {
        min-height: 80px;
    }
}

@media (max-width: 640px) {
    .brands-grid .elementor-widget-image {
        min-height: 76px;
        padding: var(--space-3);
    }
}

.brands-grid .elementor-widget-image img {
    max-height: 56px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(0.2);
    opacity: 0.85;
    transition: var(--transition-base);
}

.brands-grid .elementor-widget-image img:hover {
    opacity: 1;
    filter: grayscale(0);
}

/* Desktop brand lockup: six logos across the first row and seven across the
   second. Both rows use the full available width with no empty edge slots. */
@media (min-width: 768px)
/* hg-zoom A12: was 1025px */
    {
    .brands-grid {
        display: grid !important;
        /* 42 is the least common multiple of 6 and 7, allowing both rows to
       reach the same left/right edges while retaining evenly sized slots. */
        grid-template-columns: repeat(42, minmax(0, 1fr));
        /* Break out of Elementor's centred inner container, leaving only a
       small, intentional gutter at the viewport edges. */
        width: calc(var(--hg-page-w, 100vw) - 144px) !important;
        max-width: none !important;
        position: relative;
        left: 50%;
        margin-left: calc(calc(var(--hg-page-w, 100vw) / -2) + 72px) !important;
        margin-right: calc(calc(var(--hg-page-w, 100vw) / -2) + 72px) !important;
        gap: 20px 0 !important;
        align-items: center;
    }

    .brands-grid>* {
        grid-column: span 6;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 64px !important;
        height: 64px;
        margin: 0 16px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    .brands-grid>*:nth-child(-n + 6) {
        grid-row: 1;
        grid-column: span 7;
    }

    .brands-grid>*:nth-child(n + 7) {
        grid-row: 2;
        grid-column: span 6;
    }

    .brands-grid>* img {
        display: block;
        width: auto !important;
        height: 64px !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain;
        filter: none !important;
        opacity: 1 !important;
    }

    /* These source files include unusually large square/vertical canvas areas.
     Scale the image box so the visible mark, rather than its whitespace,
     matches the other brand marks. */
    .brands-grid img[src*="/assets/brand/03-rws.webp"] {
        height: 46px !important;
    }

    .brands-grid img[src*="/assets/brand/08-nike.webp"] {
        height: 82px !important;
    }

    .brands-grid img[src*="/assets/brand/11-capitaland.webp"] {
        height: 32px !important;
    }
}

/* ==========================================================================
   TheGrail → Hello Elementor Migration: Placeholder & Container Fixes
   ========================================================================== */
/* Elementor container resets for hello-elementor */
.elementor-section-wrap>.elementor-element,
.elementor-top-section,
.e-container,
.elementor-container {
    max-width: 100% !important;
}

/* Ensure Elementor containers don't add unwanted padding */
.elementor-section>.elementor-container {
    max-width: 100%;
}

/* ─── Hero Gallery Placeholders ─── */
/* ─── Features Gallery Placeholders ─── */
/* ─── Offer Section Placeholders ─── */
/* ─── Brand Grid Placeholder Text ─── */
/* ─── CTA Bar Inner Flex ─── */
/* ─── Elementor Container Width Fixes ─── */
.section.hero>.e-container,
.section.hero>.elementor-container,
.section-uploads>.e-container,
.section-features>.e-container,
.section-offer>.e-container,
.section-brands>.e-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* ─── Fix elementor widget margins in sections ─── */
.elementor-widget-wrap>.elementor-element {
    margin-bottom: 0;
}

/* Override Elementor default page title that shows "Home" */
.elementor-widget-page-title {
    display: none !important;
}

/* ─── Elementor Theme Style Resets ─── */
.elementor-page .elementor-section {
    padding: 0;
}

/* Ensure full-width containers in hello-elementor */
.elementor-section-full_width .elementor-container {
    max-width: 100%;
}

/* ─── Testimonial Widget Improvements ─── */
/* Force left alignment on all Elementor Testimonial widgets globally */
.elementor-widget-testimonial .elementor-testimonial-wrapper,
.elementor-widget-testimonial .elementor-testimonial-content,
.elementor-widget-testimonial .elementor-testimonial-name,
.elementor-widget-testimonial .elementor-testimonial-job,
.elementor-widget-testimonial .elementor-testimonial-meta {
    text-align: left !important;
}

/* ─── Icon Box Widget Improvements ─── */
/* Mockup has these as a plain left-aligned icon+text row on the section's
   own background — no card, no border, no shadow around the whole item —
   matching the existing (elsewhere-unused-here) .features-list/.icon--
   feature-* system below. The widget's own "position:left" setting
   (set directly in _elementor_data) handles icon-beside-content instead of
   icon-above-content; this just strips the card chrome and restyles the
   icon to the same rounded-square-with-colored-glow look. */
.thegrail-feature-box.elementor-widget-icon-box {
    padding: 0;
    background: none;
    box-shadow: none;
}

.features-list .thegrail-feature-box:not(:last-child) {
    margin-bottom: var(--space-8);
}

.thegrail-feature-box .elementor-icon-box-wrapper {
    align-items: flex-start !important;
    gap: var(--space-6);
}

/* Corrected 2026-09-19: the mockup (Main Landing Page.png) actually shows a
   white rounded-square icon with a soft colored glow shadow behind it, not a
   solid pastel-filled circle — the previous comment here cited a
   "FEEDBACK-CHECKLIST.md" that doesn't exist anywhere in this repo's
   history. Reusing the exact glow values already proven correct in
   .icon--feature-guest/quality/team above (built for this same 3-icon list
   in its pre-Elementor PHP version) instead of inventing new ones. */
.thegrail-feature-box .elementor-icon-box-icon {
    background: var(--color-white) !important;
    border-radius: 14px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.features-list .thegrail-feature-box:nth-of-type(1) .elementor-icon-box-icon {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 22px rgba(242, 106, 170, 0.38), 0 0 28px rgba(242, 106, 170, 0.18) !important;
}

.features-list .thegrail-feature-box:nth-of-type(2) .elementor-icon-box-icon {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 22px rgba(241, 174, 17, 0.42), 0 0 28px rgba(241, 174, 17, 0.2) !important;
}

.features-list .thegrail-feature-box:nth-of-type(3) .elementor-icon-box-icon {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 22px rgba(96, 165, 250, 0.38), 0 0 28px rgba(96, 165, 250, 0.18) !important;
}

.thegrail-feature-box .elementor-icon-box-icon i,
.thegrail-feature-box .elementor-icon-box-icon svg {
    color: var(--color-text) !important;
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
}

.thegrail-feature-box .elementor-icon-box-content {
    text-align: left !important;
}

.thegrail-feature-box .elementor-icon-box-title {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-semibold) !important;
    /* Client feedback (Main Page #3): subheadings too small vs Figma. */
    font-size: 1.25rem !important;
    color: var(--color-text) !important;
    margin-bottom: var(--space-3) !important;
}

.thegrail-feature-box .elementor-icon-box-description {
    color: var(--color-text-muted) !important;
    /* Client feedback (Main Page #3): body text too small vs Figma. */
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* ─── Hello Elementor specific adjustments ─── */
body.hello-elementor main.site-main {
    padding-top: 0;
}

/* Remove the "Home" page title that hello-elementor injects */
.elementor-widget-page-title h1 {
    display: none;
}

/* Ensure the header from hello-elementor renders over the Elementor content.
   Note: no `position` here — .site-header is already `position: sticky`
   (which is itself a valid positioning context), overriding it to `relative`
   here previously broke the sticky floating-header behavior on scroll. */
/* ==========================================================================
   Elementor native-widget adapters

   Elementor's "CSS Classes" (Advanced tab) control always applies the class
   to the widget's own wrapper div (.elementor-widget-xxx), never to the
   inner rendered tag (img/video/a). The rules below bridge that gap for
   design classes that were originally authored to target the inner element
   directly, so any current or future Image/Video/Button widget tagged with
   these classes renders identically to the legacy hand-authored markup.
   ========================================================================== */
.elementor-widget-image.blog-featured-thumb img,
.elementor-widget-image.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.elementor-widget-image.logo-img img {
    display: block;
    height: 34px;
    width: auto;
    max-height: 34px;
    object-fit: contain;
}

/* Descendant-based adapters: class sits on the Elementor Container (which IS
   the rendered element itself, unlike widgets), so these target whatever
   img/video Elementor nests inside regardless of intermediate widget wrapper divs. */
.hero-gallery-item img,
.hero-gallery-item video,
.hero-gallery-item .elementor-video,
.hero-gallery-item .elementor-wrapper,
.hero-gallery-item .elementor-widget-image,
.hero-gallery-item .elementor-widget-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.elementor-widget-button.btn .elementor-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--gradient-cta);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-widget-button.btn .elementor-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--color-white);
}

.elementor-widget-button.btn .elementor-button:active {
    transform: translateY(0);
}

/* Bridge for the outlined "pill" button variant used on service pages
   (Sticker Print Photo Booth "Instant Prints" etc. row) applied via
   Elementor widget _css_classes, which lands on the wrapper, not
   .elementor-button — same rule as the .btn bridge above. */
/* The bridge rules above target the wrapper's inner .elementor-button, but
   the base hand-authored `.btn`/`.btn-service-secondary` classes (written
   for plain `<a class="btn">` markup) also match the WRAPPER directly,
   since Elementor's _css_classes always lands there too. That silently
   double-paints a pill background on both wrapper and inner tag — invisible
   when both happen to use the same size, but renders as a visible "pill
   inside a pill" whenever a bridge rule gives the inner tag a different
   size (e.g. the compact .header-cta button below). Neutralize the
   wrapper's own box styling so only the inner tag is ever visible. */
.elementor-widget-button.btn {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* The header CTA button widget carries both "header-cta" and "btn" classes
   on the same wrapper (not nested, per the original hand-authored
   `.header-cta .btn` descendant rule above), so that rule never matches an
   Elementor-rendered button and it fell back to the generic, larger .btn
   size. Bridge the compact header size directly. */
.elementor-widget-button.header-cta.btn .elementor-button {
    height: 36px;
    padding: 0 20px;
    font-size: var(--text-sm);
    border-radius: var(--radius-btn);
}

/* Same wrapper/descendant class-landing mismatch as .header-cta above: the
   hero CTA widget carries "hero-cta" and "btn" on the same wrapper, so
   `.hero-cta .btn` (descendant selector) never matches and the button fell
   back to the generic full-pill .btn radius instead of the mockup's soft
   rounded-rect. */
.elementor-widget-button.hero-cta.btn .elementor-button {
    padding: 12px 28px;
    border-radius: var(--radius-btn);
}

/* Service hero CTA widgets carry only `btn`; Elementor puts that class on
   the wrapper.  Target the actual anchor so “Check us Out!” retains the
   mockup's left alignment and softly rounded rectangular (not pill) shape. */
.service-detail-page .service-split-text .elementor-widget-button.btn {
    width: auto;
    align-self: flex-start;
}

.service-detail-page .service-split-text .elementor-widget-button.btn .elementor-button {
    min-height: 40px;
    padding: 12px 28px;
    border-radius: var(--radius-btn);
    font-size: 0.96rem;
    font-weight: var(--font-medium);
    line-height: 1rem;
}

/* Hero photo collage for the Holographic Photo Booth service page.
   The widget IDs are stable across Elementor regenerations and the generated
   CSS is frequently rewritten, so we pin their final visual positions here
   instead of relying only on the upload-generated `.elementor-10` CSS. */
body.service-page--holographic-photo-booth [data-id="8b873fb9"] {
    position: relative !important;
    aspect-ratio: 561 / 903 !important;
    width: 100% !important;
    overflow: visible !important;
}

body.service-page--holographic-photo-booth [data-id="8b873fb9"]>.e-con-inner {
    display: block !important;
}

/* KOREKSI 2026-09-27 (kategori A): percentage lama (46.2%/27.4%/53.8%) salah - lihat detail di komentar
   functions.php (`applyCollageFix`, wp_footer script untuk halaman ini). PENTING: rule di bawah TIDAK
   PUNYA EFEK NYATA di live - functions.php menyuntik inline style (position/width/height/left/top) via
   JS ke elemen yang SAMA dengan el.style.setProperty(...,'important'), dan inline style SELALU menang
   atas stylesheet eksternal apa pun `!important`-nya. functions.php adalah satu-satunya tempat yang perlu
   diubah untuk mengubah tampilan; CSS di bawah disamakan nilainya hanya sebagai fallback jika JS gagal
   dimuat (mis. JS error di halaman lain), TIDAK untuk mengendalikan hasil pada kondisi normal. */
body.service-page--holographic-photo-booth [data-id="eebe2a80"],
body.service-page--holographic-photo-booth [data-id="9d4118f3"],
body.service-page--holographic-photo-booth [data-id="4215c68e"],
body.service-page--holographic-photo-booth [data-id="8cff9103"],
body.service-page--holographic-photo-booth [data-id="f7ccad23"],
body.service-page--holographic-photo-booth [data-id="0037c05f"] {
    position: absolute !important;
    left: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

body.service-page--holographic-photo-booth [data-id="eebe2a80"] {
    top: 0% !important;
    width: 265.9px !important;
    height: 265.9px !important;
}

body.service-page--holographic-photo-booth [data-id="9d4118f3"] {
    top: 31.23% !important;
    width: 265.9px !important;
    height: 265.9px !important;
}

body.service-page--holographic-photo-booth [data-id="4215c68e"] {
    top: 62.46% !important;
    width: 265.9px !important;
    height: 265.9px !important;
}

body.service-page--holographic-photo-booth [data-id="8cff9103"] {
    left: 299.7px !important;
    top: 8.19% !important;
    width: 274.1px !important;
    height: 273.1px !important;
}

body.service-page--holographic-photo-booth [data-id="f7ccad23"] {
    left: 299.7px !important;
    top: 40.09% !important;
    width: 265.9px !important;
    height: 265.9px !important;
}

body.service-page--holographic-photo-booth [data-id="0037c05f"] {
    left: 299.7px !important;
    top: 70.43% !important;
    width: 265.9px !important;
    height: 273.1px !important;
}

body.service-page--holographic-photo-booth [data-id="8b873fb9"] .elementor-video,
body.service-page--holographic-photo-booth [data-id="8b873fb9"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
}

body.service-page--holographic-photo-booth [data-id="d5c50194"] {
    display: none !important;
}

/* ==========================================================================
   Uploads section header ("Our recommended must experience photo booths!")
   replicating ui_png/Main Landing Page.png
   ========================================================================== */
.uploads-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.uploads-desc {
    max-width: 400px !important;
}

.uploads-desc .elementor-heading-title {
    font-weight: normal;
}

.section-title--uploads {
    margin-bottom: 0;
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title--uploads .section-title-line {
    display: block;
}

.section-title--uploads em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
}

/* ==========================================================================
   Recommended-services bento grid (Home, "Our recommended must experience
   photo booths!") — 3-column masonry replicating ui_png/Main Landing Page.png
   ========================================================================== */
.recommended-columns {
    align-items: stretch;
    width: 100%;
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.recommended-col {
    gap: var(--space-5);
    /* allow columns to grow so the three-column layout fills the parent container */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

/* Strong overrides to ensure the recommended-columns gallery fills its container
   and the three columns distribute space evenly. Uses higher-specificity
   selectors and !important to win over Elementor-generated inline rules. */
.section-uploads .recommended-columns {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: var(--space-5) !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.section-uploads .recommended-columns .recommended-col {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-uploads .recommended-columns .recommended-col>.recommended-card-photo:last-child,
.section-uploads .recommended-columns .recommended-col>.recommended-card-text:last-child {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.section-uploads .recommended-columns {
    padding-bottom: 0 !important;
}

/* Make the bottom recommended-columns gallery span the full container width
   by counteracting the container padding. Uses the shared container padding
   variable so it responds to layout changes. */
.section-uploads .recommended-columns {
    width: calc(100% + 2 * var(--container-padding)) !important;
    margin-left: calc(var(--container-padding) * -1) !important;
    max-width: none !important;
}

/* Remove extra bottom padding on desktop so the section bottom aligns
   with the next section. Keep padding for smaller viewports. */
@media (min-width: 768px)
/* hg-zoom A12: was 880px */
    {
    .section-uploads {
        padding-bottom: 0 !important;
    }
}

/* Remove internal padding so the gallery content can truly span the full width */
.section-uploads .recommended-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.recommended-card-text {
    background: linear-gradient(120deg, #F26AAA 0%, #F1AE11 100%);
    border-radius: var(--radius-card);
    padding: var(--space-8) var(--space-6);
    color: var(--color-white);
    justify-content: center;
    min-height: 220px;
}

.recommended-card-text.recommended-card-text--rev {
    background: linear-gradient(120deg, #F1AE11 0%, #F26AAA 100%);
}

/* Ensure text inside recommended cards remains white even when Elementor
   injects widget-level colors. Important because the gradient needs high
   contrast for legibility. Scoped to section-uploads only. */
.section-uploads .recommended-card-text .elementor-widget-text-editor,
.section-uploads .recommended-card-text .recommended-card-title,
.section-uploads .recommended-card-text .recommended-card-desc {
    color: #ffffff !important;
}

/* Responsive overrides: keep the gallery full-bleed while allowing sensible
   column stacking on narrower viewports. Uses the same container padding
   variable so behavior follows global layout tokens. */
@media (max-width: 880px) {
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns {
        width: calc(100% + 2 * var(--container-padding)) !important;
        margin-left: calc(var(--container-padding) * -1) !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col {
        flex: 1 1 48% !important;
    }
}

@media (max-width: 600px) {
    .section-uploads .recommended-columns .recommended-col {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .section-uploads .recommended-columns {
        margin-left: calc(var(--container-padding-mobile, 24px) * -1) !important;
        width: calc(100% + 2 * var(--container-padding-mobile, 24px)) !important;
    }
}

.recommended-card-text .recommended-card-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.6rem;
    margin: 0 0 var(--space-3);
}

.recommended-card-text .recommended-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.95;
}

.recommended-card-photo {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: block;
}

/* .recommended-card-photo's ~440px height comes from an Elementor
   `min-height` container setting, not the CSS `height` property. Per spec,
   a descendant's percentage `height` only resolves against an ancestor's
   explicit `height` — min-height doesn't count, even though it visually
   produces a definite size. So `height:100%` on the image (or its wrapper
   div) was always being treated as invalid/auto and falling back to
   intrinsic aspect-ratio sizing — most photos' aspect ratio just happens
   to land close to the card height, masking it everywhere except the one
   perfectly-square source image where it's glaringly a 300x300 square
   stranded in a 440px card. Absolute positioning sidesteps the whole
   min-height-vs-height distinction: it fills the nearest positioned
   ancestor's padding box directly regardless of how that box's size was
   established. */
.recommended-card-photo>.elementor-widget-image,
.recommended-card-photo>.elementor-widget-html {
    position: absolute;
    inset: 0;
}

.recommended-card-photo img,
.recommended-card-photo video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.recommended-card-badge {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    width: calc(100% - 2 * var(--space-3)) !important;
    max-width: none !important;
    min-width: 0 !important;
    right: auto !important;
    transform: none;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    color: var(--color-white);
    border-radius: var(--radius-btn);
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.section-uploads .recommended-card-badge {
    inset-inline-start: var(--space-3) !important;
    width: calc(100% - 2 * var(--space-3)) !important;
    max-width: none !important;
    min-width: 0 !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.recommended-card-badge .elementor-heading-title {
    color: var(--color-white);
}

/* --- Section: Creating Bespoke Photo Booth Customisations --- */
.section-bespoke {
    background: var(--color-white);
}

.bespoke-split {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
}

.bespoke-media {
    position: relative;
    min-height: 805px;
    margin-bottom: var(--space-8);
}

.bespoke-media-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 72%;
    height: 100%;
    padding: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.bespoke-media-front {
    position: absolute !important;
    right: 6% !important;
    left: auto !important;
    transform: none !important;
    bottom: -20px !important;
    width: 32% !important;
    max-width: 360px !important;
    padding: 0 !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}

.bespoke-media-front img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Fine-tune specific extracted image position to preserve shadow */
img[src*="extracted_901292ff.webp"] {
    display: block !important;
    position: relative !important;
    transform: translate(72px, 100px) scale(1.5) !important;
    -webkit-transform: translate(72px, 100px) scale(1.5) !important;
}

/* Front image fills its card exactly - no scale/shift so image size matches container size */
img[src*="extracted_085fd7c9.webp"] {
    display: block !important;
    transform: none !important;
    -webkit-transform: none !important;
}

.bespoke-content {
    max-width: 640px !important;
    width: 100% !important;
    padding-top: var(--space-6);
    text-align: right;
    justify-self: start;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.section-title--bespoke {
    margin-bottom: var(--space-5);
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #E91E8C;
}

.section-title--bespoke .section-title-line {
    display: block;
}

.section-title--bespoke em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(90deg, #F1AE11 0%, #F26AAA 35%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc--bespoke {
    width: 340px;
    max-width: 340px !important;
}

.section-desc--bespoke .elementor-heading-title {
    max-width: 320px;
    margin-left: auto;
    margin-right: 0;
    font-weight: normal;
}

@media (max-width: 992px) {
    :where(html:not(.hg-page-zoom)) .bespoke-split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    :where(html:not(.hg-page-zoom)) .bespoke-media {
        min-height: 460px;
    }
}

/* Superseded by the per-icon pastel-circle rule above (.thegrail-feature-box
   .elementor-icon-box-icon, from client feedback FEEDBACK-CHECKLIST.md Main
   Page #5) — this older flat-grey override had the same specificity and sat
   later in the file, so it was silently winning the cascade and flattening
   all 3 icons to --color-surface-muted instead of their grey/blue/pink
   badges. Removed 2026-09-19. */
/* --- Add-Ons page --- */
.addons-hero {
    text-align: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-10);
}

.addons-hero-title .elementor-heading-title {
    font-size: clamp(2.5rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 4rem);
    font-weight: var(--font-bold);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-3);
    line-height: 1.15;
}

.addons-hero-subtitle .elementor-heading-title {
    font-size: var(--text-lg);
    color: var(--color-orange) !important;
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-4);
}

.addons-hero-desc .elementor-heading-title {
    font-size: var(--text-base);
    color: var(--color-text-muted) !important;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: normal;
}

.addons-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.addon-badge {
    display: inline-block;
    margin-bottom: var(--space-6) !important;
}

.addon-badge .elementor-heading-title {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

.addon-badge--pink .elementor-heading-title {
    background: #FBD9E6;
    border-color: #F49CBE;
    color: #E4487A !important;
}

.addon-badge--orange .elementor-heading-title {
    background: #FBE0C4;
    border-color: #F1AE11;
    color: var(--color-orange) !important;
}

.addon-badge--yellow .elementor-heading-title {
    background: #FCEFC7;
    border-color: #E0C158;
    color: #B8860B !important;
}

.addon-grid {
    gap: var(--space-6);
}

.addon-grid--5 .addon-card,
.addon-grid--4 .addon-card {
    width: calc(50% - var(--space-6) / 2);
}

.addon-grid--3 .addon-card {
    width: calc(33.333% - var(--space-6) * 2 / 3);
}

.addon-card {
    overflow: visible;
}

.addon-card-media {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-card);
}

.addon-card-media .addon-card-image {
    position: absolute;
    inset: 0;
}

.addon-card-media .elementor-widget-html {
    width: 100% !important;
    height: 100% !important;
}

.addon-card-media img,
.addon-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.addon-card-title {
    background: var(--color-white);
    margin: calc(-1 * var(--space-8)) var(--space-5) 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: var(--shadow-header);
    position: relative;
    z-index: 1;
}

.addon-card-desc {
    background: var(--color-white);
    margin: 0 var(--space-5);
    box-shadow: var(--shadow-header);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    position: relative;
}

.addon-card-title .elementor-heading-title {
    margin: var(--space-4) var(--space-5) var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text) !important;
    text-align: center;
}

.addon-card-desc .elementor-heading-title {
    margin: 0 var(--space-5) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted) !important;
    font-weight: normal;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 768px) {

    :where(html:not(.hg-page-zoom)) .addon-grid--5 .addon-card,
    :where(html:not(.hg-page-zoom)) .addon-grid--4 .addon-card,
    :where(html:not(.hg-page-zoom)) .addon-grid--3 .addon-card {
        width: 100%;
    }
}

/* Glambot — the intro kicker is a native Elementor Text Editor widget. */
.service-page--glambot .service-glambot-kicker {
    margin: 0 0 var(--space-3);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.85rem, calc(var(--hg-page-w, 100vw) * 2.8 / 100), 2.5rem);
    line-height: 1;
    text-align: center;
}

body.service-page--holographic-photo-booth .service-split-text {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin-right: clamp(2rem, calc(var(--hg-page-w, 100vw) * 4 / 100), 4.5rem) !important;
    justify-content: center !important;
}

body.service-page--holographic-photo-booth .service-split-text .elementor-widget-text-editor {
    max-width: 31rem !important;
}

.service-holographic-photo-booth .service-hpb-sec-5 {
    /* Legacy sections from the pre-mockup page. Their content has been removed
     from the Elementor document; this guard also prevents stale element
     cache HTML from reappearing during a rolling cache refresh. */
    display: none !important;
}

.service-holographic-photo-booth .service-hpb-sec-5b {
    /* The desktop reference uses one uninterrupted light panel for both the
     transition and variation rows. */
    background: #F1F3F7;
    padding: var(--space-8) var(--space-5) var(--space-12);
}

.service-holographic-photo-booth .elementor-element-hpbopt01 {
    text-align: center;
}

.service-holographic-photo-booth .elementor-element-hpbopt01 .service-heading {
    margin: 0;
    /* Desktop mockup: 35 px type with a 45 px two-line rhythm. */
    font-size: clamp(1.875rem, calc(var(--hg-page-w, 100vw) * 2.5 / 100), 2.1875rem);
    line-height: 1.28;
}

@media (min-width: 768px)
/* hg-zoom A12: was 900px */
    {

    /* The Elementor document intentionally keeps each copy/card group
     independently editable. Compose those native children as the two rows
     shown in the desktop mockup. */
    .service-holographic-photo-booth .service-hpb-sec-5b {
        display: grid !important;
        /* At the 1408 px reference width this yields ~344 px image tiles for
       the transition row, matching the 343 px mockup artwork. */
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: clamp(3rem, calc(var(--hg-page-w, 100vw) * 5 / 100), 5rem);
        row-gap: 0;
        align-items: center;
    }

    .service-holographic-photo-booth .service-hpb-sec-5b>.elementor-element-hpbopt01 {
        grid-column: 1 / -1;
        margin-bottom: var(--space-8);
    }

    .service-holographic-photo-booth .service-hpb-sec-5b>.service-hpb-transition-cards {
        grid-column: 1;
        grid-row: 2;
    }

    .service-holographic-photo-booth .service-hpb-sec-5b>.service-hpb-transition-copy {
        grid-column: 2;
        grid-row: 2;
    }

    .service-holographic-photo-booth .service-hpb-sec-5b>.service-hpb-variation-copy {
        grid-column: 1;
        grid-row: 3;
        margin-top: var(--space-4);
    }

    .service-holographic-photo-booth .service-hpb-sec-5b>.service-hpb-variation-cards {
        grid-column: 2;
        grid-row: 3;
        /* The mockup's variation tiles occupy the wider right-hand edge rather
       than being constrained to the copy column's narrow width. */
        width: calc(100% + clamp(4.5rem, calc(var(--hg-page-w, 100vw) * 7.65 / 100), 7.2rem));
        margin-top: var(--space-4);
        margin-left: calc(-1 * clamp(5rem, calc(var(--hg-page-w, 100vw) * 8.8 / 100), 8rem));
    }
}

.service-holographic-photo-booth .service-hpb-transition-copy,
.service-holographic-photo-booth .service-hpb-variation-copy {
    min-width: 0;
}

/* `55d0d4ed` is the right-hand transition copy. It sits in grid-column 2 of
   service-hpb-sec-5b. Elementor's e-con-full resolves --width:100% against the
   parent container (not the grid cell), and .container adds margin:auto — both
   push the element off-screen to the right. Fix: force width to 100% of the grid
   cell and zero out all margin/padding overrides. */
.service-holographic-photo-booth .service-hpb-transition-copy {
    /* Override Elementor CSS-variable-based sizing so the element fills its grid cell */
    --width: 100% !important;
    --margin-left: 0px !important;
    --margin-right: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}

/* Keep the variation copy on the left grid column but align its editorial
   content to the right, matching the requested composition. */
.service-holographic-photo-booth .service-hpb-variation-copy {
    text-align: right;
}

.service-holographic-photo-booth .service-hpb-transition-copy .service-heading,
.service-holographic-photo-booth .service-hpb-variation-copy .service-heading {
    font-size: clamp(1.65rem, calc(var(--hg-page-w, 100vw) * 2.45 / 100), 2.35rem);
    line-height: 1.14;
    margin: 0 0 var(--space-5);
    /* Elementor heading widget sets white-space:nowrap + display:inline-block
     which causes the h2 to exceed its grid cell width (~210px overhang).
     Reset to normal so the heading wraps within the column. */
    white-space: normal !important;
    display: block !important;
}

.service-holographic-photo-booth .service-hpb-transition-copy .service-paragraph,
.service-holographic-photo-booth .service-hpb-variation-copy .service-paragraph {
    margin: 0;
    max-width: 38rem;
}

.service-holographic-photo-booth .service-hpb-transition-cards,
.service-holographic-photo-booth .service-hpb-variation-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    min-width: 0;
    /* These grids are Elementor `.container` elements.  Its generic 80 px
     horizontal padding was shrinking every image tile by that amount per side. */
    max-width: none !important;
    padding-inline: 0 !important;
}

/* KOREKSI 2026-09-27 (kategori A): the individual grid-cell card (`.service-transition-card`, shared by
   both the transition and variation groups) still had Elementor's own default "boxed" content-width
   padding (10px each side) even after the grid above was cleared - shrinking each video by 20px (330px
   container -> 310px video, mockup wants ~350.8px). Removing it lets the card fill its ~352px grid
   column, matching the mockup within tolerance. */
.service-holographic-photo-booth .service-transition-card {
    padding-inline: 0 !important;
}

.service-holographic-photo-booth .service-hpb-transition-cards>.e-con-inner,
.service-holographic-photo-booth .service-hpb-variation-cards>.e-con-inner,
.service-holographic-photo-booth .service-hpb-branding-grid>.e-con-inner,
.service-holographic-photo-booth .service-hpb-feature-grid>.e-con-inner,
.service-holographic-photo-booth .service-hpb-discover-grid>.e-con-inner,
.service-holographic-photo-booth .service-hpb-also-grid>.e-con-inner {
    display: contents !important;
}

.service-holographic-photo-booth .service-hpb-transition-cards>.e-con,
.service-holographic-photo-booth .service-hpb-variation-cards>.e-con {
    min-width: 0;
    text-align: center;
}

/* KOREKSI 2026-09-27 (kategori A): border-radius di bawah tidak pernah ter-render untuk <video> - sitewide
   rule `.elementor-widget-video .elementor-wrapper.e-hosted-video video.elementor-video{border-radius:
   inherit!important}` (spesifisitas lebih tinggi, 3 kelas vs 2) memaksa video mewarisi radius WRAPPER-nya,
   yang di sini tidak diset sama sekali -> 0. Radius perlu diset di wrapper juga, bukan cuma video/img. */
.service-holographic-photo-booth .service-hpb-transition-cards .elementor-wrapper,
.service-holographic-photo-booth .service-hpb-variation-cards .elementor-wrapper {
    border-radius: var(--radius-card) !important;
}

.service-holographic-photo-booth .service-hpb-transition-cards img,
.service-holographic-photo-booth .service-hpb-variation-cards img,
.service-holographic-photo-booth .service-hpb-transition-cards video,
.service-holographic-photo-booth .service-hpb-variation-cards video {
    width: 100% !important;
    /* height:auto is required alongside aspect-ratio: a swapped-in <video>
     carries width/height CONTENT ATTRIBUTES copied from the original <img>
     (main.js videoSwaps, to prevent a 0x0 collapse before its src loads).
     Those attributes map to a non-auto used height via the UA stylesheet,
     which aspect-ratio does NOT override unless height is explicitly auto -
     without this, the video renders at its raw attribute height (800px)
     instead of the intended square card. */
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}

.service-holographic-photo-booth .service-hpb-transition-cards>.e-con>.e-con-inner,
.service-holographic-photo-booth .service-hpb-variation-cards>.e-con>.e-con-inner {
    gap: 0 !important;
    align-items: center;
}

.service-holographic-photo-booth .service-hpb-transition-cards .elementor-widget-heading,
.service-holographic-photo-booth .service-hpb-variation-cards .elementor-widget-heading {
    /* The mockup's 45 px labels sit halfway over the image edge. */
    display: inline-flex !important;
    min-height: 45px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin: -22.5px auto 0 !important;
    padding: 0 var(--space-5) !important;
    border-radius: 4px !important;
    background: var(--gradient-cta) !important;
}

.service-holographic-photo-booth .service-hpb-transition-cards .elementor-heading-title,
.service-holographic-photo-booth .service-hpb-variation-cards .elementor-heading-title {
    color: var(--color-white) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    line-height: 1.25;
}

.service-holographic-photo-booth .service-hpb-sec-5d {
    padding: clamp(4rem, calc(var(--hg-page-w, 100vw) * 8 / 100), 7rem) var(--space-5) var(--space-16);
    background: var(--color-white);
}

.service-holographic-photo-booth .service-hpb-design-note {
    box-sizing: border-box;
    max-width: 760px;
    margin: 48px auto 0;
    padding: 32px;
    border: 1px solid #E1E4ED;
    border-radius: 8px;
    background: var(--color-white);
    /* mockup Services_Holographic.svg filter36: dy 1, blur σ2, rgb(25,33,61) 8% */
    box-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
}

.service-holographic-photo-booth .service-hpb-design-note p {
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
}

.service-holographic-photo-booth .service-hpb-design-note strong {
    font-weight: var(--font-bold);
}

@media (max-width: 767px) {
    .service-holographic-photo-booth .service-hpb-design-note {
        max-width: 407px;
        margin-top: 40px;
        padding: 32px;
    }
}

.service-holographic-photo-booth .service-hpb-branding-heading {
    max-width: 48rem !important;
    margin: 0 auto var(--space-10) !important;
    text-align: center;
}

.service-holographic-photo-booth .service-hpb-branding-heading .service-heading {
    margin: 0 0 var(--space-4);
    font-size: clamp(2rem, calc(var(--hg-page-w, 100vw) * 3 / 100), 2.75rem);
}

.service-holographic-photo-booth .service-hpb-branding-heading .elementor-heading-title {
    margin: 0 0 var(--space-4);
}

/* Mockup runs pink -> orange for this title, opposite the shared
   .title-gradient default (orange -> pink). Use the background-image
   longhand so background-clip:text / -webkit-text-fill-color:transparent
   from the shared rule stay intact (the background shorthand would reset
   them). */
.service-holographic-photo-booth .service-hpb-branding-heading .title-gradient {
    background-image: linear-gradient(90deg, var(--color-pink), var(--color-orange));
}

.service-holographic-photo-booth .service-hpb-branding-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, calc(var(--hg-page-w, 100vw) * 5 / 100), 5rem) clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 4 / 100), 4rem);
    max-width: 980px !important;
    margin: 0 auto !important;
    /* KOREKSI 2026-09-27 (kategori A): same Elementor default "boxed" 80px horizontal padding already
     removed from .service-hpb-transition-cards/.service-hpb-variation-cards (see comment above) was
     never applied here, shrinking each of the 4 branding cards from ~458px to 378px. */
    padding-inline: 0 !important;
}

.service-holographic-photo-booth .service-hpb-branding-grid>.service-content-card {
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible !important;
}

/* The white copy box deliberately extends below its image.  Elementor can
   otherwise clip the second heading widget inside an intermediate wrapper. */
.service-holographic-photo-booth .service-hpb-branding-grid,
.service-holographic-photo-booth .service-hpb-branding-grid>.service-content-card>.e-con-inner,
.service-holographic-photo-booth .service-hpb-branding-grid .elementor-widget-heading {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.service-holographic-photo-booth .service-hpb-branding-grid .elementor-heading-title {
    margin: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

.service-holographic-photo-booth .service-hpb-branding-grid .elementor-widget-image img,
.service-holographic-photo-booth .service-hpb-branding-grid .elementor-widget-image video {
    width: 100%;
    /* KOREKSI 2026-09-27 (kategori A): mockup (Services_Holographic.svg M16-M19) menunjukkan rect nyaris
     persegi (453-458px persegi, rasio ~1) untuk keempat kartu ini, bukan 4:3 (1.333) - selisih rasio
     33% di conform, bukan sekadar container kurang lebar. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Elementor adds a 20px bottom margin to these images; it would cancel
     the -20px copy-card offset below. */
    margin-bottom: 0 !important;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card {
    /* One native Elementor container wraps the title and description, making
     the white overlay a single card rather than two stitched widgets. */
    display: flex !important;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
    z-index: 1;
    /* The reference card is 20px narrower than its image (10px on each side). */
    width: calc(100% - 20px) !important;
    align-self: center;
    box-sizing: border-box;
    min-height: 0 !important;
    /* Lift the complete copy card into the bottom edge of the image. */
    margin: -20px auto 0 !important;
    padding: var(--space-5) var(--space-6) var(--space-6) !important;
    overflow: visible !important;
    border: 2px solid transparent !important;
    /* mockup: rx 7 + stroke 2 terpusat → radius tepi luar 8; gradien stroke VERTIKAL (paint31–34 desktop, paint13–16 mobile: x1 = x2) */
    border-radius: 8px;
    background-color: transparent !important;
    background-image:
        linear-gradient(var(--color-white), var(--color-white)),
        linear-gradient(180deg, #F1AE11 0%, #F26AAA 100%) !important;
    background-origin: border-box, border-box !important;
    background-clip: padding-box, border-box !important;
}

.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card>.e-con-inner {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    padding: 0 !important;
    overflow: visible !important;
}

.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card .service-content-card-title,
.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card .service-content-card-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card .service-content-card-title .elementor-heading-title {
    font-size: var(--text-xl) !important;
    font-weight: var(--font-bold) !important;
    line-height: 1.2;
}

.service-holographic-photo-booth .service-hpb-branding-grid .service-branding-copy-card .service-content-card-text .elementor-heading-title {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-normal) !important;
    line-height: 1.5;
}

.service-holographic-photo-booth .service-hpb-sec-6 {
    padding: clamp(4rem, calc(var(--hg-page-w, 100vw) * 8 / 100), 7rem) var(--space-5) var(--space-5);
    background: var(--color-white);
}

.service-holographic-photo-booth .service-hpb-print-heading {
    display: block !important;
    max-width: 48rem;
    margin: 0 auto !important;
    text-align: center;
}

.service-holographic-photo-booth .service-hpb-print-heading>.e-con-inner {
    display: block !important;
}

/* Mobile header: keep the navigation available on every template while the
   page scrolls.  Reserve its 70px visual height in the document flow so a
   page's first section remains fully visible instead of sitting underneath
   the fixed bar.  Desktop retains the floating/sticky treatment above. */
.service-holographic-photo-booth .service-hpb-print-heading .service-heading {
    margin: 0;
    font-size: clamp(2rem, calc(var(--hg-page-w, 100vw) * 3 / 100), 2.75rem);
    line-height: 1.1;
}

.service-holographic-photo-booth .service-hpb-print-heading .service-paragraph {
    margin: var(--space-5) auto 0;
    max-width: 34rem;
}

.service-holographic-photo-booth .service-hpb-sec-7 {
    padding: var(--space-10) var(--space-5) clamp(4rem, calc(var(--hg-page-w, 100vw) * 8 / 100), 7rem);
    background: var(--color-white);
}

.service-holographic-photo-booth .service-hpb-feature-grid {
    display: grid !important;
    /* The feature photograph in the reference is 489 × 869px. */
    grid-template-columns: minmax(0, 1fr) minmax(300px, 489px) minmax(0, 1fr);
    gap: clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 5 / 100), 5rem);
    max-width: 1120px !important;
    margin: 0 auto !important;
    align-items: center;
}

.service-holographic-photo-booth .service-hpb-features-left,
.service-holographic-photo-booth .service-hpb-features-right {
    display: grid !important;
    gap: var(--space-6) !important;
}

.service-holographic-photo-booth .service-hpb-features-left>.e-con-inner,
.service-holographic-photo-booth .service-hpb-features-right>.e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--space-6) !important;
}

.service-holographic-photo-booth .service-hpb-features-left>.e-con,
.service-holographic-photo-booth .service-hpb-features-right>.e-con,
.service-holographic-photo-booth .service-hpb-features-left>.e-con-inner>.e-con,
.service-holographic-photo-booth .service-hpb-features-right>.e-con-inner>.e-con {
    min-height: 176px;
    padding: var(--space-6) var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    background:
        linear-gradient(var(--color-white), var(--color-white)) padding-box,
        var(--gradient-cta) border-box;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    text-align: center;
}

.service-holographic-photo-booth .service-hpb-features-left>.e-con>.e-con-inner,
.service-holographic-photo-booth .service-hpb-features-right>.e-con>.e-con-inner,
.service-holographic-photo-booth .service-hpb-features-left>.e-con-inner>.e-con>.e-con-inner,
.service-holographic-photo-booth .service-hpb-features-right>.e-con-inner>.e-con>.e-con-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.service-holographic-photo-booth .service-hpb-features-left .e-con .e-con,
.service-holographic-photo-booth .service-hpb-features-right .e-con .e-con {
    width: auto !important;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
}

.service-holographic-photo-booth .service-hpb-features-left svg,
.service-holographic-photo-booth .service-hpb-features-right svg {
    width: 30px;
    height: 30px;
}

.service-holographic-photo-booth .service-hpb-features-left .elementor-widget-text-editor,
.service-holographic-photo-booth .service-hpb-features-right .elementor-widget-text-editor {
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.service-holographic-photo-booth .service-hpb-features-left .elementor-heading-title,
.service-holographic-photo-booth .service-hpb-features-right .elementor-heading-title {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-normal) !important;
    line-height: 1.55;
}

.service-holographic-photo-booth .service-hpb-features-center img {
    width: 100%;
    aspect-ratio: 489 / 869;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

.service-holographic-photo-booth .service-section-white {
    padding: clamp(4rem, calc(var(--hg-page-w, 100vw) * 8 / 100), 7rem) var(--space-5);
    overflow: hidden;
}

/* Decorative pink circle pair behind the "Discover our complete range"
   cross-sell row — same ::before/::after pattern already used for this
   exact kind of accent on the AI Photo Booth page's own "Discover" section
   (.ai-discover-section) and the Digital Only page's yellow variant. Missing
   here; added per mockup crop comparison, colors/positions adapted since no
   dedicated SVG mockup covers this shared cross-sell component (confirmed:
   it's not part of any individual page's Services_*.svg — added to all 25
   service pages as a standalone section, per commit 3f33b226). Anchored on
   .hpb-discover-section (the shared wrapper around both the heading and the
   4-card grid) rather than .service-section-white, since that ancestor's
   own overflow:hidden would otherwise clip a more dramatic peek-past-the-edge
   offset; kept within this element's own bounds instead. */
.service-holographic-photo-booth .hpb-discover-section {
    position: relative;
}

/* This section's own inner elements (.service-hpb-discover-grid,
   .service-hpb-discover-heading) each declare their own max-width
   (1320px / 1180px) intending to be noticeably wider than most page
   content, but the shared sitewide .container class this element also
   carries caps at 1200px minus 80px+80px padding = 1040px effective width
   -- narrower than either inner max-width, silently making both dead code.
   Measured live via Playwright: grid and heading both rendered at exactly
   1040px, never reaching 1320px/1180px. Widen just this one instance
   (not the shared .container rule sitewide) and let the padding go to 0
   since the inner elements already center themselves via their own
   margin:auto. */
.service-holographic-photo-booth .hpb-discover-section.container {
    max-width: 1320px;
    padding-left: 0;
    padding-right: 0;
}

.service-holographic-photo-booth .hpb-discover-section::before,
.service-holographic-photo-booth .hpb-discover-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(242, 106, 170, .22);
    pointer-events: none;
    z-index: 0;
}

.service-holographic-photo-booth .hpb-discover-section::before {
    width: 150px;
    height: 150px;
    left: -20px;
    top: 10px;
}

.service-holographic-photo-booth .hpb-discover-section::after {
    width: 118px;
    height: 118px;
    right: -20px;
    bottom: 40px;
}

.service-holographic-photo-booth .hpb-discover-section .service-hpb-discover-heading,
.service-holographic-photo-booth .hpb-discover-section .service-hpb-discover-grid {
    position: relative;
    z-index: 1;
}

.service-holographic-photo-booth .service-hpb-discover-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 6rem);
    max-width: 1180px !important;
    margin: 0 auto var(--space-10) !important;
    align-items: center;
}

.service-holographic-photo-booth .service-hpb-discover-heading .elementor-widget-text-editor .title-gradient {
    font-size: clamp(2rem, calc(var(--hg-page-w, 100vw) * 3 / 100), 2.75rem);
    line-height: 1.1;
}

.service-holographic-photo-booth .service-hpb-discover-heading .service-paragraph {
    margin: 0;
}

.service-holographic-photo-booth .service-hpb-discover-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: 1320px !important;
    margin: 0 auto !important;
}

.service-holographic-photo-booth .service-hpb-discover-grid>.e-con,
.service-holographic-photo-booth .service-hpb-also-grid>.e-con {
    position: relative;
    min-width: 0;
}

.service-holographic-photo-booth .service-hpb-discover-grid .service-related-card-img,
.service-holographic-photo-booth .service-hpb-also-grid .service-related-card-img {
    overflow: hidden;
    border-radius: var(--radius-card);
    /* KOREKSI 2026-09-27 (kategori A): same Elementor default "boxed" padding pattern fixed elsewhere on
     this page (transition-cards/variation-cards/branding-grid) was never applied here - shrinking each
     card's media by 20px per side. */
    padding-inline: 0 !important;
}

.service-holographic-photo-booth .service-hpb-discover-grid .service-related-card-img img,
.service-holographic-photo-booth .service-hpb-discover-grid .service-related-card-img video {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.service-holographic-photo-booth .service-related-card-caption {
    position: relative;
    z-index: 1;
    margin: calc(-1 * var(--space-5)) var(--space-5) 0;
    padding: 9px var(--space-4) 9px 70px;
    border: 1px solid #E1E4ED;
    border-radius: 4px;
    background: var(--color-white);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    text-align: center;
}

.service-holographic-photo-booth .service-hpb-discover-grid .service-related-card-caption {
    /* Base .service-related-card-caption reserves 70px on the left for the
     circular icon used elsewhere (e.g. .service-hpb-also-grid); this
     4-card "Discover" row has no icon, so that reserved space just
     squeezes the text off-center and forces an unwanted line wrap
     ("Holographic X" no longer fits on one line). Match left/right padding
     so text-align:center is actually centered and has room to stay inline. */
    padding-left: var(--space-4);
    /* This card's own container_type/content_width:"full" setting resolves to
     an explicit width:220px (matching the image above it) in Elementor's own
     generated CSS, rather than "auto" — so the base rule's
     margin:-20px 20px 0 (mockup-correct: 20px inset each side) only SHIFTS
     the box right by 20px without shrinking it, overflowing 20px past the
     image's right edge instead of insetting. Measured live via Playwright
     getBoundingClientRect(): image and caption were both exactly 220px wide,
     caption right edge 20px beyond the image's. Restoring width:auto lets
     the fixed left/right margins shrink the box correctly on both sides. */
    width: auto !important;
}

.service-holographic-photo-booth .service-hpb-also-grid .service-related-card-caption {
    text-align: left;
}

.service-holographic-photo-booth .service-related-card-caption .elementor-widget-text-editor {
    color: var(--color-orange);
    font-size: var(--text-base);
    line-height: 1.2;
}

.service-holographic-photo-booth .service-section-light {
    padding: clamp(4rem, calc(var(--hg-page-w, 100vw) * 7 / 100), 6rem) var(--space-5);
    background: #F3F6FA;
}

.service-holographic-photo-booth .service-section-light .service-section-center {
    margin-bottom: var(--space-8);
    /* Name implies centering but the rule never actually set text-align;
     measured live via Playwright: the "Also available in.." heading (an
     inline-block h2 via .title-gradient) sat flush against this
     container's own left edge (x=180, matching the box's own left bound)
     instead of centered across its ~1040px width. */
    text-align: center;
}

.service-holographic-photo-booth .service-section-light .service-heading {
    margin: 0;
    font-size: clamp(2rem, calc(var(--hg-page-w, 100vw) * 3 / 100), 2.75rem);
}

.service-holographic-photo-booth .service-hpb-also-grid .service-related-card-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* The print statement and its feature matrix read as one continuous white
   editorial panel in the desktop reference. Keep Elementor's two parents in
   the document, but remove their artificial seam and give the matrix the
   reference dimensions. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */
    {

    body.service-page .service-hero-split,
    body.service-page .service-split-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 64px !important;
    }

    /* HPB print heading also carries .service-split-grid, but it must
     stay single-column (heading above paragraph = two rows), not split
     into two side-by-side columns.  This rule intentionally has higher
     specificity than the shared 2-column .service-split-grid rule above. */
    body.service-page [class*="elementor-"] .service-hpb-print-heading.service-split-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--space-5, 20px) !important;
    }
}

.service-holographic-photo-booth .service-hpb-print-heading {
    max-width: 560px;
}

.service-holographic-photo-booth .service-hpb-print-heading .service-heading {
    font-size: 36px;
    line-height: 40px;
}

.service-holographic-photo-booth .service-hpb-print-heading .service-paragraph,
.service-holographic-photo-booth .service-hpb-print-heading .service-paragraph .elementor-heading-title {
    max-width: 540px;
    margin: 24px auto 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

.service-holographic-photo-booth .service-hpb-sec-7 {
    margin: 0 !important;
    padding: 48px var(--space-5) 96px !important;
}

.service-holographic-photo-booth .service-hpb-sec-7>.e-con-inner {
    max-width: none !important;
}

.service-holographic-photo-booth .service-hpb-feature-grid {
    grid-template-columns: 280px 560px 280px;
    column-gap: 80px;
    row-gap: 0;
    max-width: 1280px !important;
    justify-content: center;
    align-items: center;
}

/* Elementor introduces two nested layout containers around the image.
     Size that complete chain explicitly so the feature photo is not held at
     its previous intrinsic box width. */
.service-holographic-photo-booth .service-hpb-features-center img {
    /* Keep the source asset's native 489:869 proportion at the wider
       desktop column width—no side crop and no stretched photograph. */
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
}

.service-holographic-photo-booth .service-hpb-features-left,
.service-holographic-photo-booth .service-hpb-features-right,
.service-holographic-photo-booth .service-hpb-features-left>.e-con-inner,
.service-holographic-photo-booth .service-hpb-features-right>.e-con-inner {
    gap: 84px !important;
}

.service-holographic-photo-booth .service-hpb-features-left>.e-con,
.service-holographic-photo-booth .service-hpb-features-right>.e-con,
.service-holographic-photo-booth .service-hpb-features-left>.e-con-inner>.e-con,
.service-holographic-photo-booth .service-hpb-features-right>.e-con-inner>.e-con {
    box-sizing: border-box;
    width: 270px !important;
    max-width: 100%;
    min-height: 210px !important;
    align-self: center !important;
    justify-self: center;
    margin-inline: auto !important;
    padding: 24px 20px;
    border-radius: 8px;
}

.service-holographic-photo-booth .service-hpb-features-left svg,
.service-holographic-photo-booth .service-hpb-features-right svg {
    width: 32px;
    height: 32px;
}

.service-holographic-photo-booth .service-hpb-features-left .elementor-widget-text-editor,
.service-holographic-photo-booth .service-hpb-features-right .elementor-widget-text-editor {
    font-size: 20px;
    line-height: 24px;
}

.service-holographic-photo-booth .service-hpb-features-left .elementor-heading-title,
.service-holographic-photo-booth .service-hpb-features-right .elementor-heading-title {
    font-size: 16px !important;
    line-height: 24px;
}

/* Holographic Photo Booth / “Also available in..” panel (desktop reference). */
/* Holographic Photo Booth / related-services panel (desktop reference).
   The rendered Elementor container is the layout owner here: it holds both
   the two-column intro and the four related-service cards. */
/* Discover-grid card image sizing for the 768-899px tablet range only.
   This used to live unbounded inside the `(min-width: 768px)` block above,
   which meant it also matched every desktop width — at equal specificity
   with the true desktop rule (`.service-holographic-photo-booth
   .service-hpb-discover-grid .service-related-card-img img`, aspect-ratio
   4/5), the later declaration in source order silently won, collapsing
   `aspect-ratio` to `auto` for all 4 "Discover our complete range" cards.
   Each card then sized its box off its own swapped-in gif's native ratio
   instead of the intended uniform ratio (only the Name Card's real footage
   happens to be natively ~4:5, which is why only it "looked right").
   Bounded to match the sibling 899px mobile breakpoint used elsewhere for
   this same grid, so it no longer overrides the desktop rule. */
/* ==========================================================================
   Blog single-post template (single.php) — hero + reusable case-study
   content classes (for authoring future posts in this style).
   ========================================================================== */
.blog-single-hero {
    text-align: center;
    padding: var(--space-16) 0 var(--space-10);
}

.blog-single-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-single-content {
    max-width: 860px;
    padding: var(--space-12) 0;
}

.blog-single-content>p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 var(--space-6);
}

.blog-single-content hr {
    border: none;
    border-top: 1px solid var(--color-border-soft, #e1e4ed);
    margin: var(--space-10) 0;
}

/* Reusable "case study" block — authors compose these in the post editor */
.blog-case-study {
    margin: var(--space-12) 0;
}

.blog-case-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(247, 174, 188, 0.56);
    line-height: 1;
    margin: 0 0 var(--space-2);
}

/* In the desktop case-study composition, the large case number is a visual
   marker in the left gutter rather than a line that pushes the tag/title
   downward.  Keep it inside the viewport as the content column narrows. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */
    {
    .blog-case-study {
        position: relative;
    }

    .blog-case-number {
        position: absolute;
        top: 0;
        left: max(-147px, calc(450px - calc(var(--hg-page-w, 100vw) / 2)));
        margin: 0;
        font-size: 75px;
        font-weight: 600;
        line-height: 1;
    }
}

.blog-case-tag {
    display: inline-block;
    background: rgba(233, 69, 101, 0.1);
    color: #e94565;
    font-size: 0.8rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin: 0 0 var(--space-3);
}

.blog-case-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
}

.blog-case-desc {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 var(--space-8);
}

.blog-case-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
}

@media (min-width: 768px)
/* hg-zoom A12: was 900px */
    {
    .blog-case-body {
        grid-template-columns: 1fr 1fr;
    }
}

.blog-case-media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

.blog-case-section+.blog-case-section {
    margin-top: var(--space-6);
}

.blog-case-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #403e3e);
    margin: 0 0 var(--space-2);
}

.blog-case-section p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Footer icon-list widget (Contact column) inherits the Elementor Kit's
   default --e-global-color-secondary (#54595F, tuned for light backgrounds),
   rendering near-invisible on the dark footer. Override with extra
   specificity rather than relying on source order, per established
   Kit-override convention. */
.site-footer .elementor-widget-icon-list .elementor-icon-list-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.4;
}

.site-footer .elementor-widget-icon-list .elementor-icon-list-text a,
.site-footer .elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-text {
    color: var(--color-white);
}

.elementor-element.elementor-element-346705a1.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-element.elementor-element-b0ff942d.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-element.elementor-element-3ad3cda4.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item {
    margin-bottom: 0.5rem;
}

.elementor-element.elementor-element-346705a1.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-element.elementor-element-b0ff942d.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-element.elementor-element-3ad3cda4.elementor-icon-list--layout-traditional.elementor-list-item-link-full_width.elementor-widget.elementor-widget-icon-list .elementor-icon-list-text {
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

/* Keep the service columns compact on desktop so the longer labels follow the
   intended multi-line editorial rhythm instead of escaping as one long row. */
@media (min-width: 768px) {

    .site-footer .elementor-element.elementor-element-346705a1 .elementor-icon-list-text,
    .site-footer .elementor-element.elementor-element-b0ff942d .elementor-icon-list-text,
    .site-footer .elementor-element.elementor-element-3ad3cda4 .elementor-icon-list-text {
        display: block !important;
        max-width: 170px;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* ========================================================================
   Home / recommended-services bento

   The desktop reference is a deliberately asymmetric 1440px composition,
   rather than three equal masonry columns.  Keep the editorial layout in a
   viewport-sized coordinate space so each image and text block retains the
   reference proportions as the viewport scales.
   ======================================================================== */
/* The generic section title/description margins add an unintended 24px below
   the two header columns. The reference uses the header's own lower spacing. */
.section-uploads .section-title--uploads,
.section-uploads .uploads-desc,
.section-uploads .uploads-desc .elementor-heading-title {
    margin: 0 !important;
}

/* The coloured editorial panels in the source SVG have square corners. Only
   the photographic cards carry the 8px corner radius. */
.section-uploads .recommended-card-text {
    border-radius: 0 !important;
}

/* This selector was accidentally placed in the navigation breakpoint and
   removed the CTA from the document flow below 1300px. */
.section-uploads [data-id="2ed4ae2"] {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 32px 0 0 !important;
    display: flex !important;
    justify-content: center !important;
}

@media (min-width: 768px)
/* hg-zoom A12: was 1025px */
    {
    .section-uploads {
        overflow: visible;
        padding-bottom: 56px !important;
    }

    .section-uploads .uploads-header {
        grid-template-columns: 587px minmax(0, 1fr);
        margin-bottom: clamp(56px, calc(var(--hg-page-w, 100vw) * 5.97 / 100), 86px);
    }

    .section-uploads .section-title--uploads {
        font-size: clamp(2.25rem, calc(var(--hg-page-w, 100vw) * 3.125 / 100), 2.8125rem);
        line-height: 1.2222;
    }

    .section-uploads [data-id="2ed4ae2"] {
        padding-top: 20px !important;
    }

    /* SVG reference: 344 × 57px, 6px radius, with a 40px arrow at the right. */
    .section-uploads [data-id="2ed4ae2"] .elementor-button {
        width: 344px;
        min-height: 57px;
        height: 57px;
        padding: 0 25px 0 31px;
        border-radius: 6px;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
    }

    .section-uploads [data-id="2ed4ae2"] .elementor-button-content-wrapper,
    .section-uploads [data-id="2ed4ae2"] .elementor-button-text {
        display: inline-flex;
        align-items: center;
    }

    /* The parent remains inside Elementor's 1200px container. Expand from the
     container's visual centre so the bento truly starts at both viewport
     edges, as it does in the SVG reference. */
    .section-uploads .recommended-columns {
        position: relative !important;
        display: block !important;
        width: var(--hg-page-w, 100vw) !important;
        max-width: none !important;
        height: calc(var(--hg-page-w, 100vw) * 152.36 / 100) !important;
        min-height: 0 !important;
        margin: 0 0 0 calc(50% - calc(var(--hg-page-w, 100vw) / 2)) !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Keep Elementor's three editor columns as real positioned ancestors.
     `display: contents` made nested cards disappear in some Elementor
     render paths, so each column now owns its cards explicitly. */
    .section-uploads .recommended-columns .recommended-col {
        position: absolute !important;
        top: 0 !important;
        display: block !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-uploads .recommended-card-photo,
    .section-uploads .recommended-card-text {
        position: absolute !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .section-uploads .recommended-card-text {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(16px, calc(var(--hg-page-w, 100vw) * 2.2 / 100), 32px) !important;
        text-align: center;
    }

    .section-uploads .recommended-card-text .recommended-card-title {
        font-family: var(--font-serif);
        font-size: clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 2.7778 / 100), 2.5rem);
        line-height: 1.15;
        margin-right: auto;
        margin-left: auto;
        white-space: nowrap;
    }

    .section-uploads .recommended-card-text .recommended-card-desc {
        width: min(100%, calc(var(--hg-page-w, 100vw) * 18 / 100));
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(0.75rem, calc(var(--hg-page-w, 100vw) * 1.25 / 100), 1.125rem);
        line-height: 1.3333;
    }

    .section-uploads .recommended-card-photo {
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(15, 23, 42, 0.22);
    }

    .section-uploads .recommended-card-badge {
        inset: auto 0 0 !important;
        width: 100% !important;
        height: var(--recommended-badge-band, 18%) !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 0;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(to bottom, rgba(15, 10, 15, 0), rgba(15, 10, 15, 0.55));
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .section-uploads .recommended-card-badge .elementor-widget-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 2 * var(--recommended-badge-inset, calc(var(--hg-page-w, 100vw) * 1.25 / 100)));
        height: calc(var(--hg-page-w, 100vw) * 3.1944 / 100);
        margin: 0 var(--recommended-badge-inset, calc(var(--hg-page-w, 100vw) * 1.25 / 100)) var(--recommended-badge-bottom, calc(var(--hg-page-w, 100vw) * 1.7361 / 100));
        border: clamp(1px, calc(var(--hg-page-w, 100vw) * 0.1389 / 100), 2px) solid #fff;
        border-radius: 9px;
        box-sizing: border-box;
    }

    .section-uploads .recommended-card-badge .elementor-heading-title {
        color: #fff;
        font-size: clamp(0.75rem, calc(var(--hg-page-w, 100vw) * 1.6667 / 100), 1.5rem);
        font-weight: 600;
        line-height: 1;
    }
}

/* Mobile is an intentionally linear feed, not a scaled-down bento. Reset
   every desktop positioning constraint so all twelve service blocks remain in
   document flow, one below another. This also prevents the final card in a
   column from collapsing when its image wrapper is absolutely positioned. */
@media (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 16px !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 16px !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col>.recommended-card-photo:last-child,
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col>.recommended-card-text:last-child {
        flex: 0 0 auto !important;
        min-height: 220px !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-card-text,
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-card-photo {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-card-text {
        min-height: 220px !important;
        padding: 32px 24px !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-card-photo {
        min-height: 320px !important;
    }

    /* Elementor's flex defaults can collapse or clip later siblings in this
     section. Force every direct card to take its own visible row. */
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col>.recommended-card-text,
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col>.recommended-card-photo {
        display: flex !important;
        flex: 0 0 auto !important;
        max-height: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns,
    :where(html:not(.hg-page-zoom)) .section-uploads .recommended-columns .recommended-col {
        overflow: visible !important;
    }
}

/* The navigation widget is flattened by Elementor, so on mobile the actual
   <nav> needs to fill the 70px header row itself before it can centre the
   hamburger vertically. */
@media (max-width: 767px) {

    /* Keep the navy footer compact but preserve its two-column link rhythm on
     narrow phones; the previous <=480px one-column override lost that cue. */
    .site-footer .footer-inner .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
        text-align: left;
    }

    .site-footer .footer-logo {
        grid-column: 1 / -1;
        text-align: center;
    }

    .site-footer .footer-logo .site-logo,
    .site-footer .footer-logo .footer-social {
        justify-content: center;
    }

    .site-footer .footer-logo .tagline {
        margin-left: auto;
        margin-right: auto;
    }

    .site-footer .footer-bottom .container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .recommended-mobile-carousel {
        display: none !important;
    }
}

/* Home mobile — footer composition (Elementor ca122f8d).
   Source reference: Main Landing Mobile.svg, y=5969–6948. */
@media (max-width: 767px) {
    .site-footer {
        background: #285689 !important;
        padding: 0 !important;
    }

    .site-footer .footer-inner {
        padding: 9.09vw 0 0 !important;
    }

    .site-footer .footer-logo {
        display: contents !important;
    }

    .site-footer .footer-logo .site-logo {
        margin: 0 !important;
    }

    .site-footer .footer-logo .tagline .elementor-heading-title {
        max-width: 280px !important;
        margin: 0 auto !important;
        color: #ffffff !important;
        font-size: 3.18vw !important;
        font-weight: var(--font-normal, 400) !important;
        line-height: 4.55vw !important;
    }

    .site-footer .footer-col h4 {
        margin: 0 0 2.73vw !important;
        color: #ffffff !important;
        font-family: var(--font-sans) !important;
        font-size: 3.64vw !important;
        font-weight: var(--font-semibold) !important;
        line-height: 4.55vw !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .site-footer .footer-col ul,
    .site-footer .footer-col .elementor-icon-list-items {
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-footer .footer-col .elementor-icon-list-item {
        margin: 0 0 2.27vw !important;
        padding: 0 !important;
    }

    .site-footer .footer-col .elementor-icon-list-icon {
        display: none !important;
    }

    .site-footer .footer-col .elementor-icon-list-text,
    .site-footer .footer-col .elementor-icon-list-text a {
        display: block !important;
        color: #ffffff !important;
        font-size: 2.73vw !important;
        font-weight: var(--font-normal, 400) !important;
        line-height: 3.64vw !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .site-footer .footer-social .elementor-social-icons-wrapper {
        display: flex !important;
        justify-content: center;
        --grid-column-gap: 16px;
        gap: 16px !important;
    }

    .site-footer .footer-social .elementor-social-icons-wrapper::before,
    .site-footer .footer-social .elementor-social-icons-wrapper::after {
        align-items: center;
        justify-content: center;
        width: 5.45vw;
        height: 5.45vw;
        border-radius: 4px;
        background: #B4B9C9;
        color: #ffffff;
        font-family: "Font Awesome 6 Brands";
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
    }

    .site-footer .footer-social .elementor-social-icons-wrapper::before {
        content: "\f099";
        display: flex;
        order: 2;
    }

    .site-footer .footer-social .elementor-social-icons-wrapper::after {
        content: "\f167";
        display: flex;
        order: 5;
    }

    .site-footer .footer-social .elementor-grid-item:nth-child(1) {
        order: 1;
    }

    .site-footer .footer-social .elementor-grid-item:nth-child(2) {
        order: 3;
    }

    .site-footer .footer-social .elementor-grid-item:nth-child(3) {
        order: 4;
    }

    .site-footer .footer-social .elementor-icon.elementor-social-icon {
        width: 5.45vw !important;
        height: 5.45vw !important;
        background: #B4B9C9 !important;
    }

    .site-footer .footer-bottom .container {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.91vw !important;
        width: 100% !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 3.18vw !important;
        line-height: 4.55vw !important;
        text-align: center;
    }

    .site-footer .footer-bottom a {
        color: #ffffff !important;
    }
}

/* Contact page — mobile reference composition. */
/* Services catalogue: every tile in the reference shares the same outer
   height.  The page mixes Elementor containers and HTML/video cards, so set
   the dimensions on both the grid items and their inner card element. */
/* Holographic Photo Booth — phone composition.
   This is deliberately kept below the desktop/tablet rules: the supplied
   440px reference is a one-column editorial sequence, with wider media and
   compact, centred feature cards. */
/* The fourth related-service card uses Elementor's boxed-container variant
   for its caption.  On phones that nested wrapper gave only that card a
   wider image and a taller caption.  Flatten and normalise all four cards
   to the fourth card's intended caption treatment. */
/* Tablet has room for the service panel but not the 1,280px desktop feature
   matrix. Preserve its Elementor widgets and stack them within the canvas. */
@media (min-width: 900px) and (max-width: 1024px) {
    :where(html:not(.hg-page-zoom)) .service-holographic-photo-booth .service-hpb-feature-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 520px !important;
        margin-inline: auto !important;
    }
}

/* Desktop full-bleed for service social-feed: superseded 2026-09-30 by the
   generalized .section.section-social composition in thegrail-adapter.css
   (position:relative on the section itself makes this page-specific
   left:50%/negative-margin trick redundant — kept only as a note so a
   future grep for "holographic-photo-booth" + "social-feed" finds this). */
/* Remove the container's horizontal gutters for social sections on service pages
   so the social-feed can render full-bleed like the main page. */
/* Fix alignment for services-grid (override e-con-full default shift) */
@media (max-width: 767px) {
    body.service-page--holographic-photo-booth .service-split-text {
        margin-right: 0 !important;
        text-align: center !important;
        align-items: center !important;
    }

    body.service-page--holographic-photo-booth .service-split-text .title-gradient,
    body.service-page--holographic-photo-booth .service-split-text .service-heading {
        font-size: clamp(1.6rem, 6vw, 2.1rem) !important;
        line-height: 1.1 !important;
    }

    .service-detail-page .service-split-text .elementor-widget-button.btn {
        align-self: center !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    body.service-page--holographic-photo-booth .service-hpb-sec-1 .service-split-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    body.service-page--holographic-photo-booth .service-hpb-sec-1 .service-split-media {
        order: -1 !important;
        margin-bottom: 5rem !important;
        /* Matches ~80px gap in SVG between gallery and text */
    }

    body.service-page--holographic-photo-booth .service-hpb-sec-1 {
        padding-top: 0 !important;
        /* Pull up */
        padding-bottom: 2.5rem !important;
        /* Reduce bottom gap to sec 2 */
    }

    body[class*="service-page--"] [class*="-sec-2"] {
        padding-top: 3rem !important;
        /* Total gap between sec 1 and 2 = 5.5rem (~88px), matching SVG */
    }

    body[class*="service-page--"] [class*="-sec-1"] .service-media-collage {
        margin-top: 0 !important;
        /* Removes the 2rem margin from Elementor */
    }

    body[class*="service-page--"] .service-split-media>.elementor-widget-video>.elementor-widget-container,
    body[class*="service-page--"] .service-split-media>.elementor-widget-video {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
    }

    body[class*="service-page--"] .service-split-media>.elementor-widget-video>.e-con-inner {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make all secondary grids stack vertically on mobile */
    body[class*="service-page--"] [class*="-transition-cards"],
    body[class*="service-page--"] [class*="-variation-cards"],
    body[class*="service-page--"] [class*="-branding-grid"],
    body[class*="service-page--"] [class*="-discover-grid"],
    body[class*="service-page--"] [class*="-feature-grid"],
    body[class*="service-page--"] [class*="-features-wrap"],
    body[class*="service-page--"] [class*="-also-grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        /* Standardize gap between stacked cards */
    }

    /* Ensure card wrappers take full width when stacked */
    body[class*="service-page--"] [class*="-transition-cards"]>.e-con,
    body[class*="service-page--"] [class*="-variation-cards"]>.e-con,
    body[class*="service-page--"] [class*="-branding-grid"]>.service-content-card,
    body[class*="service-page--"] [class*="-feature-grid"]>.e-con,
    body[class*="service-page--"] [class*="-features-wrap"]>.e-con,
    body[class*="service-page--"] [class*="-also-grid"]>.e-con {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix the ordering for Sec-5b based on the mobile SVG mockup (Cards should appear before Copy) */
    body[class*="service-page--"] [class*="-sec-5b"] {
        display: flex !important;
        flex-direction: column !important;
    }

    body[class*="service-page--"] [class*="-sec-5b"]>[class*="-options-heading"],
    body[class*="service-page--"] [class*="-sec-5b"]>.elementor-widget-heading {
        order: 0 !important;
    }

    body[class*="service-page--"] [class*="-sec-5b"]>[class*="-transition-cards"] {
        order: 1 !important;
    }

    body[class*="service-page--"] [class*="-sec-5b"]>[class*="-transition-copy"] {
        order: 2 !important;
        margin-top: 2rem !important;
        margin-bottom: 3rem !important;
        /* Space before next variation section */
    }

    body[class*="service-page--"] [class*="-sec-5b"]>[class*="-variation-cards"] {
        order: 3 !important;
    }

    body[class*="service-page--"] [class*="-sec-5b"]>[class*="-variation-copy"] {
        order: 4 !important;
        margin-top: 2rem !important;
    }

    /* Fix branding heading and design notes overflowing to the right on mobile */
    body[class*="service-page--"] [class*="-branding-heading"],
    body[class*="service-page--"] [class*="-design-note"],
    body[class*="service-page--"] .elementor-element-f8a3263f {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body[class*="service-page--"] [class*="-branding-heading"]>.e-con-inner,
    body[class*="service-page--"] [class*="-design-note"]>.e-con-inner,
    body[class*="service-page--"] .elementor-element-f8a3263f>.e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Force long text to wrap gracefully on mobile */
    body[class*="service-page--"] [class*="-branding-heading"] .service-heading,
    body[class*="service-page--"] [class*="-branding-heading"] .elementor-heading-title,
    body[class*="service-page--"] [class*="-design-note"] .service-heading,
    body[class*="service-page--"] [class*="-design-note"] .elementor-heading-title,
    body[class*="service-page--"] .elementor-element-f8a3263f .service-heading,
    body[class*="service-page--"] .elementor-element-f8a3263f .elementor-heading-title {
        white-space: normal !important;
        word-break: break-word !important;
        display: block !important;
    }
}

/* Enforce equal heights and uniform aspect-ratio for all Discover Grid cards universally */
body[class*="service-page--"] [class*="-discover-grid"] .service-related-card-img img,
body[class*="service-page--"] [class*="-discover-grid"] .service-related-card-img video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    border-radius: var(--radius-card) !important;
}

/* Anchor menu Add-Ons (#premium-setup, #unlock-customisation, #additional-services): sisakan ruang header fixed */
#premium-setup,
#unlock-customisation,
#additional-services,
#section-uploads,
#section-bespoke,
#section-offer {
    scroll-margin-top: 110px;
}

@media (max-width: 767px) {

    #premium-setup,
    #unlock-customisation,
    #additional-services,
    #section-uploads,
    #section-bespoke,
    #section-offer {
        scroll-margin-top: 100px;
    }
}