/* Shared header styles extracted for consistent header look */
.site-wide-font {
    /* Ensure DM Sans is the default UI font where available. Falls back to system sans-serifs. */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Apply DM Sans to UI controls only; body font comes from global-styles.css */
input, textarea, button, select { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.elementor-6861 .elementor-element.elementor-element-d001842 > .elementor-widget-container,
.elementor-6861 .elementor-element.elementor-element-6cf0216 > .elementor-widget-container,
.elementor-6861 .elementor-element.elementor-element-aec37cd > .e-con-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.elementor-6861 .elementor-element.elementor-element-6cf0216 img {
    width: auto !important;
    max-height: 56px !important;
    transform: translateY(6px) scale(6.0);
    transform-origin: left center;
}

/* Whatsapp modal small helper (used by inline widget) */
.whatsapp-modal {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    display: none;
    z-index: 99999;
}
.whatsapp-modal.show { display: block; }

/* ===== Scandi minimal polish (feature cards + stats) ===== */
/* Use utility class instead of inline !important styles */
.feature-card--large p { font-size: 18px; }

/* Card micro-interactions */
.feature-card { transition: transform .24s cubic-bezier(.2,.9,.2,1), box-shadow .24s ease, background-color .18s ease; border: 1px solid rgba(2,8,12,0.04); border-radius:12px; }
.feature-card:focus-within, .feature-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(2,12,16,0.08); }
@media (prefers-reduced-motion: reduce){ .feature-card, .feature-card:hover, .feature-card:focus-within { transition: none !important; transform: none !important; box-shadow: none !important; } }

/* Small decorative accent used by Scandinavian minimal aesthetic */
.feature-card::before { content: ''; display:block; width:40px; height:4px; background: linear-gradient(90deg, rgba(0,223,189,0.95), rgba(0,199,170,0.9)); border-radius:2px; margin: -6px auto 10px; opacity:0.95 }

/* Stats visual tuning */
.benefits-stats-inner { padding: 22px 18px; border-radius:12px }
.stat .value{ font-size:28px; font-weight:800; color:#ffffff; margin-bottom:8px }
.stat .label{ font-size:16px; color:rgba(255,255,255,0.72); }
@media (max-width:680px){ .stat .value{ font-size:24px } .stat .label{ font-size:14px } }

/* Make SVG icons fit inside the feature-icon container */
.feature-card .feature-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:10px; background:#fbfbfb; color:#041014 }
.feature-card .feature-icon svg{ width:28px; height:28px; display:block }
/* Make image icons fit the same as svg icons */
.feature-card .feature-icon img{ width:28px; height:28px; display:block; object-fit:contain }

/* Tidy spacing for why-grid */
.why-grid { gap:20px }


/* Hover / focus effects for key CTAs: Book a demo, Learn more */
.elementor-button.button-book-demo,
.elementor-button.button-learn-more,
.elementor-button.button-landing-cta,
.elementor-button.button-showcase-cta {
    transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, opacity .18s ease;
    transform-origin: center bottom;
    will-change: transform;
}

.elementor-button.button-book-demo:hover,
.elementor-button.button-learn-more:hover,
.elementor-button.button-landing-cta:hover,
.elementor-button.button-showcase-cta:hover,
.elementor-button.button-book-demo:focus-visible,
.elementor-button.button-learn-more:focus-visible,
.elementor-button.button-landing-cta:focus-visible,
.elementor-button.button-showcase-cta:focus-visible {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 40px rgba(2,30,30,0.45), 0 6px 18px rgba(0,0,0,0.25);
}

/* Make keyboard focus clearly visible without removing browser defaults */
.elementor-button:focus-visible {
    outline: 3px solid rgba(0,255,213,0.12);
    outline-offset: 4px;
}

.elementor-button:active {
    transform: translateY(-2px) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
    .elementor-button.button-book-demo,
    .elementor-button.button-learn-more,
    .elementor-button.button-landing-cta,
    .elementor-button.button-showcase-cta {
        transition: none !important;
    }
    .elementor-button.button-book-demo:hover,
    .elementor-button.button-learn-more:hover,
    .elementor-button.button-landing-cta:hover,
    .elementor-button.button-showcase-cta:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Footer styles (extracted from per-page inline blocks) */
.site-footer{background:#041014;padding:20px 18px;font-family:"DM Sans", Sans-serif;position:relative;z-index:1000}
/* Increase specificity for footer color rules so they reliably override
    theme defaults (header-footer.min.css) when that file is loaded later. */
body .site-footer { color: rgba(255,255,255,0.86); }
body .site-footer__inner{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body .site-footer__nav{font-weight:600;font-size:16px}
body .site-footer__nav a{color:rgba(255,255,255,0.86);text-decoration:none;margin:0 8px}
body .site-footer__nav a:hover{color:#00ffd5}
body .site-footer__contact{font-size:16px}
body .site-footer__contact a{color:#00ffd5;text-decoration:none;margin-left:8px}
body .site-footer__copyright{width:100%;text-align:center;margin-top:8px;font-size:15px;color:rgba(255,255,255,0.56)}
@media (max-width:720px){.site-footer__inner{justify-content:center;text-align:center}.site-footer__nav{order:1;width:100%;margin-top:6px}.site-footer__contact{order:2;width:100%;margin-top:2px}}

/* Footer social icon row between nav and contact */
.site-footer__social{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
}
.site-footer__social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.site-footer__social img{
    display:block;
    width:24px;
    height:24px;
}
@media (max-width:720px){
    .site-footer__social{order:2;width:100%;margin-top:4px;}
    .site-footer__contact{order:3;}
}

/* Made-by credit in footer (bottom-right) */
.site-footer__madeby{position:absolute;right:18px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.72);opacity:0.95}
.site-footer__madeby .site-footer__madeby-text{font-weight:600;letter-spacing:0.02em}
.site-footer__logo{height:20px;width:auto;display:inline-block}

@media (max-width:720px){
    .site-footer__madeby{position:static;margin-top:8px;order:3;width:100%;justify-content:center}
}

.site-footer__legal{position:absolute;left:18px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:16px;color:rgba(255,255,255,0.72)}
body .site-footer__legal{position:absolute;left:18px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:16px;color:rgba(255,255,255,0.72)}
body .site-footer__legal a{color:rgba(255,255,255,0.86);text-decoration:none;font-weight:600}
body .site-footer__legal a:hover{text-decoration:underline;color:#00ffd5}
body .site-footer__legal span{color:rgba(255,255,255,0.56)}
@media (max-width:720px){
    .site-footer__legal{position:static;order:0;margin-bottom:6px;justify-content:center}
}

/* Cookie consent panel - stylish, site-aligned */
.cookie-consent{ position: fixed; left: 50%; transform: translateX(-50%) translateY(110%); bottom: 18px; z-index: 2147483660; width: calc(100% - 36px); max-width: 1100px; box-sizing: border-box; pointer-events: none; opacity: 0; transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease; }
.cookie-consent.is-visible{ transform: translateX(-50%) translateY(0%); opacity: 1; pointer-events: auto; }
.cookie-consent__inner{ background: linear-gradient(180deg,#00181a, #042428); color: #eafffb; padding: 14px; border-radius: 12px; box-shadow: 0 20px 60px rgba(2,30,30,0.6); display:flex; gap:12px; align-items:center; justify-content:space-between; }
.cookie-consent__text{ max-width:68%; font-size:14px; line-height:1.45; }
.cookie-consent__text p{ margin:6px 0 0; color: rgba(234,255,251,0.9); }
.cookie-consent__text a{ color: #00ffd5; text-decoration:underline; }
.cookie-consent__actions{ display:flex; gap:10px; align-items:center; }
.cookie-consent .btn{ pointer-events: auto; }
.cookie-consent .btn-primary{ background: linear-gradient(90deg,#00ffd5,#00e6c8); color:#002226; }
.cookie-consent .btn-ghost{ background: rgba(255,255,255,0.04); color:#eafffb; border:1px solid rgba(255,255,255,0.06); }
@media (max-width:720px){ .cookie-consent__inner{ flex-direction:column; align-items:flex-start; gap:8px; } .cookie-consent__text{ max-width:100%; } .cookie-consent__actions{ width:100%; justify-content:flex-end; } }
@media (prefers-reduced-motion: reduce){ .cookie-consent{ transition: none !important; } }

/* Menu hover nicety */
nav.elementor-nav-menu--main ul li a:hover, nav.elementor-nav-menu--main ul li a.elementor-item.elementor-item-active {
    background: #FFFFFF;
    border-radius: 100px;
}
/* Shared header/logo and small overrides copied from index.html */
/* Override header/logo/nav padding - reduced for a tighter header */
.elementor-6861 .elementor-element.elementor-element-d001842 > .elementor-widget-container,
.elementor-6861 .elementor-element.elementor-element-6cf0216 > .elementor-widget-container,
.elementor-6861 .elementor-element.elementor-element-aec37cd > .e-con-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.elementor-6861 .elementor-element.elementor-element-6cf0216 img {
    width: auto !important;
    max-height: 56px !important;
    /* Visually enlarge the logo without affecting layout height.
       translateY moves the image visually without changing layout height. */
    transform: translateY(6px) scale(6.0);
    transform-origin: left center;
}
/* Hero inline slideshow used in the intro section */
.hero-slideshow{
    width:100%;
    max-width:780px;
    height:520px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    margin:24px auto 32px;
    box-shadow:0 25px 60px rgba(0,0,0,0.65),0 0 40px rgba(0,0,0,0.45);
    transform-style:preserve-3d;
    transition:transform 0.35s ease, box-shadow 0.35s ease;
}

/* Lift the entire showcase section (hero block) slightly upward so the
   slideshow and copy sit closer to the top of the viewport. This moves
   the visual block up while preserving document flow; tweak `--showcase-lift`
   to adjust the amount. */
:root { --showcase-lift: -64px; /* base font size to match other pages (services/about) */
    font-size: 16px;
}
.showcase{ 
    transform: translateY(var(--showcase-lift));
    margin-top: calc(var(--showcase-lift) * -1); /* preserve surrounding spacing */
}
.hero-slideshow .hslide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 0.8s ease-in-out;
}
.hero-slideshow .hslide.is-active{
    opacity:1;
}
@media (max-width:720px){
    .hero-slideshow{height:300px;}
}
@media (prefers-reduced-motion: reduce){
    .hero-slideshow{transition:none;}
    .hero-slideshow .hslide{transition:none;}
}

/* Localized blurred background behind the hero slideshow/text */
.hero-blur-shell{
    position:relative;
    --hero-bg-image:none;
}
.hero-blur-shell::before{
    content:"";
    position:absolute;
    /* almost flush with the hero box: very small extension */
    inset:-20px 0 -12px;
    background: var(--hero-bg-image);
    background-size:cover;
    background-position:center center;
    /* nudge the blurred backdrop slightly downward to better sit behind copy */
    transform: translateY(14px);
    will-change: transform;
    /* minimal blur for a subtle soft edge */
    filter:blur(2px);
    /* slightly less transparent than before */
    opacity:0.60;
    z-index:0;
    pointer-events:none;
}
.hero-blur-shell > *{
    position:relative;
    z-index:2;
}

/* Explicit background element used as a reliable fallback (created/updated by JS) */
.hero-blur-shell .hero-blur-bg{
    position: absolute;
    /* keep the center image tightly aligned with the slideshow */
    inset: -10px 0 -8px;
    background-size: cover;
    background-position: center center;
    /* nudge down to match the pseudo-element and align visually with the slideshow */
    transform: translateY(14px);
    will-change: transform;
    /* A1 preset: softer fade — blur and slightly increased translucency */
    filter: blur(6px);
    opacity: 0.70;
    z-index: 1;
    pointer-events: none;
    /* Softer radial fade to transparent at edges (50% / 70% / 100%) */
    -webkit-mask-image: radial-gradient(circle at 40% center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle at 40% center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
}

/* Keep any older `.hero-blur-edges` DOM created by previous JS hidden so it doesn't
   interfere — styling removed in favor of the radial mask above. */
.hero-blur-shell .hero-blur-edges{ display:none !important; }

/* ===== How It Works — small polish (dot pulse, title accent, responsive tweaks) ===== */
/* Namespaced polish so it only affects pages using the hiw-* classes */
.hiw-step__num .dot{ position: relative; overflow: visible; }
.hiw-step__num .dot::after{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85); width: 56px; height: 56px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 4px rgba(0,230,212,0.06); opacity: 0; }

@keyframes hiwDotPulse {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
    35% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.28; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Play the pulse once when the step becomes visible */
.hiw-step.in-view .hiw-step__num .dot::after{ animation: hiwDotPulse 920ms cubic-bezier(.2,.9,.2,1) both; }

/* Title left accent (subtle bar aligned with dot area) */
.hiw-step__title{ position: relative; padding-left: 0; }
.hiw-step__title::before{ display: none !important; }

/* Slight title lift when step is focused/hovered (keeps hover non-intrusive) */
.hiw-step:hover .hiw-step__title, .hiw-step:focus-within .hiw-step__title{ transform: translateY(-2px); transition: transform .22s ease; }

/* Reduce left accent on narrow screens (prevents overlap) */
@media (max-width: 880px){
    .hiw-step__title{ padding-left: 0; }
    .hiw-step__title::before{ display: none !important; }
    .hiw-step__num .dot::after{ width: 44px; height: 44px; }
}

/* Keep the polish respectful of reduced-motion */
@media (prefers-reduced-motion: reduce){
    .hiw-step.in-view .hiw-step__num .dot::after{ animation: none !important; opacity: 0 !important; }
    .hiw-step__title::before{ display: none !important; }
}

/* Accessible utility for screen-reader-only text */
.sr-only{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important }

/* HiW dot label: small 'STEP' label above the circular number */
.hiw-step__num{ display:flex; flex-direction:column; align-items:center; justify-content:center }
.hiw-step__num .dot-label{ font-family: 'DM Sans', Sans-serif; font-size:11px; font-weight:700; color:var(--brand-teal); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px }
.hiw-step__num .dot{ width:56px; height:56px }

/* Whatsapp widget modal */
.whatsapp-modal {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    display: none;
    z-index: 99999;
}
.whatsapp-modal.show { display: block; }