:root{
  --black:#000; --panel:#0c0c0e; --panel-2:#111114; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --red:#e0121e; --red-2:#b30d16; --red-hot:#ff2b37;
  --text:#f2f2f4; --muted:#a3a6ae; --dim:#74777f;
  --display:"Orbitron","Eurostile","Arial Black",sans-serif;
  --body:"Chakra Petch","Rajdhani","Helvetica Neue",Arial,sans-serif;
  --max:1240px; --gutter:clamp(20px,4vw,56px); --r:22px; --r-sm:14px;
  --grad-red:linear-gradient(180deg,#f0141f 0%,#b30d16 100%);
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
.ljl-wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.ljl-svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ljl-svg--fill{ fill:currentColor; stroke:none; }
.ljl-red{ color:var(--red-hot); }
.ljl-btn{
  display:inline-flex; align-items:center; gap:22px; padding:8px 8px 8px 30px; min-height:56px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:1rem; line-height:1.1; letter-spacing:.01em; transition:filter .2s, background-color .2s, transform .2s;
}
.ljl-btn__ico{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); font-size:1.15rem; transition:transform .25s; }
.ljl-btn:hover .ljl-btn__ico{ transform:translateX(3px); }
.ljl-btn--red{ background:var(--grad-red); color:#fff; box-shadow:0 10px 30px -10px rgba(224,18,30,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.ljl-btn--red:hover{ filter:brightness(1.12); }
.ljl-btn--ghost{ background:rgba(255,255,255,.07); border-color:var(--line-2); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ljl-btn--ghost .ljl-btn__ico{ background:rgba(255,255,255,.12); }
.ljl-btn--ghost:hover{ background:rgba(255,255,255,.13); }
.ljl-btn--sm{ min-height:50px; padding-left:26px; gap:18px; font-size:.95rem; }
.ljl-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
/* Solid, not translucent: a backdrop-blur background shows through to
   whatever is immediately behind it in the DOM — on pages where that's a
   theme/Elementor wrapper with its own background colour (not necessarily
   reachable by overriding <body>), the header picked up THAT colour
   instead of black. Solid avoids depending on what's behind it at all. */
.ljl-header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:#050506 !important; border-bottom:1px solid var(--line); }
.ljl-header .ljl-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; }
.ljl-logo img{ height:60px; width:auto; }
.ljl-nav{ display:flex; align-items:center; gap:56px; }
.ljl-nav__links{ display:flex; gap:38px; }
.ljl-nav__links a{ position:relative; text-decoration:none; font-weight:500; font-size:.98rem; color:#e9e9ec; padding:8px 0; transition:color .15s; white-space:nowrap; }
.ljl-nav__links a:hover, .ljl-nav__links a.is-active{ color:var(--red-hot); }
.ljl-nav__links a.is-active::before{ content:""; position:absolute; left:50%; top:-24px; width:78px; height:3px; margin-left:-39px; background:var(--red); border-radius:0 0 3px 3px; box-shadow:0 6px 18px rgba(224,18,30,.8); }
.ljl-burger{ display:none; background:rgba(255,255,255,.06); border:1px solid var(--line-2); border-radius:14px; color:#fff; width:48px; height:48px; align-items:center; justify-content:center; cursor:pointer; }
.ljl-footer{ background:var(--black); border-top:1px solid var(--line); padding-top:80px; }
.ljl-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:72px; }
.ljl-footer img{ height:64px; width:auto; margin-bottom:22px; }
.ljl-footer h4{ font-family:var(--display); font-weight:600; font-size:.88rem; margin-bottom:22px; }
.ljl-footer p, .ljl-footer li, .ljl-footer address{ color:var(--muted); font-size:1rem; font-style:normal; line-height:1.95; }
.ljl-footer a{ text-decoration:none; }
.ljl-footer li a:hover, .ljl-footer address a:hover{ color:#fff; }
.ljl-footer__base{ border-top:1px solid var(--line); padding-block:26px; color:var(--dim); font-size:.92rem; }
.ljl-callbar{ display:none; }
@media (max-width:1100px){
  .ljl-nav{ gap:32px; } .ljl-nav__links{ gap:26px; }
  .ljl-services{ grid-template-columns:repeat(2,1fr); }
  .ljl-why, .ljl-steps{ grid-template-columns:repeat(2,1fr); }
  .ljl-step::after{ display:none; }
  .ljl-strip ul{ grid-template-columns:repeat(2,1fr); }
  .ljl-strip li:nth-child(3){ border-left:0; } .ljl-strip li:nth-child(n+3){ border-top:1px solid var(--line); }
  .ljl-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .ljl-burger{ display:inline-flex; }
  .ljl-nav{ position:absolute; left:0; right:0; top:100%; background:#050506 !important; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 28px; display:none; }
  .ljl-nav.is-open{ display:flex; }
  .ljl-nav__links{ flex-direction:column; gap:0; }
  .ljl-nav__links a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); }
  .ljl-nav__links a.is-active::before{ display:none; }
  .ljl-nav .ljl-btn{ margin-top:22px; justify-content:space-between; }
  .ljl-head, .ljl-split, .ljl-emis__grid, .ljl-faq, .ljl-cta__panel, .ljl-contact{ grid-template-columns:1fr; }
  .ljl-hero__photo{ top:auto; height:64%; width:100%; opacity:1; background-position:76% 50%; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%); mask-image:linear-gradient(180deg,transparent 0,#000 38%); -webkit-mask-composite:source-over; mask-composite:add; }
  .ljl-hero__fade{ background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 42%,rgba(0,0,0,.25) 68%,rgba(0,0,0,.97) 100%); }
  .ljl-hero__copy{ padding-block:56px 120px; }
  .ljl-cta__actions{ justify-self:start; }
  .ljl-collage{ max-width:560px; }
  .ljl-split--reverse .ljl-collage{ order:-1; }
}
@media (max-width:640px){
  body{ padding-bottom:84px; }
  .ljl-services, .ljl-why, .ljl-steps, .ljl-checks{ grid-template-columns:1fr; }
  .ljl-logo img{ height:50px; }
  .ljl-header .ljl-wrap{ min-height:78px; }
  .ljl-hero{ min-height:0; }
  .ljl-scroll{ display:none; }
  .ljl-hero__actions .ljl-btn, .ljl-cta__actions .ljl-btn{ width:100%; justify-content:space-between; }
  .ljl-cta__actions{ align-self:stretch; width:100%; }
  .ljl-strip{ margin-top:-40px; }
  .ljl-strip ul{ grid-template-columns:1fr; }
  .ljl-strip li + li, .ljl-strip li:nth-child(3){ border-left:0; border-top:1px solid var(--line); }
  .ljl-callout{ padding:16px 20px; }
  .ljl-place{ min-height:440px; padding:14px; }
  .ljl-footer__grid{ grid-template-columns:1fr; gap:36px; }
  .ljl-services__note{ padding:22px; }
  .ljl-callbar{ display:grid; grid-template-columns:1fr 1fr; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:60; gap:10px; padding:10px; border-radius:999px; background:#0c0c0e !important; border:1px solid var(--line-2); }
  .ljl-callbar .ljl-btn{ min-height:48px; padding:6px 6px 6px 20px; gap:10px; justify-content:space-between; font-size:.95rem; }
  .ljl-callbar .ljl-btn__ico{ width:34px; height:34px; }
}
/* page wrapper for content inside the branded template (shortcode output already brings its own .ljl-wrap) */
.ljl-page-main{ padding-block:56px 88px; min-height:50vh; }
a{ color:inherit; }
.ljl-btn{ white-space:nowrap; }
.ljl-logo{ flex:none; }

/* The header uses a translucent background (blurred over whatever's behind
   it), so the page background MUST be solid black or the header looks washed
   out/grey. Active themes often ship their own `body{background:...}` rule
   that can win the cascade, so these are pinned with !important deliberately
   — this template exists specifically to guarantee a consistent look
   regardless of the active theme. */
/* Deliberately UNSCOPED (not tied to a body/html class): when the shared
   header/footer are delivered as [ljl_header]/[ljl_footer] shortcodes
   (needed because this site's page-template selection isn't reliably
   respected), the real <body> tag is whatever WordPress/Elementor renders
   it as — it never gets a class from us to hang scoped rules off. These
   rules have to stand on their own merit (!important) against Elementor's
   own global styles, wherever the branded markup ends up in the DOM. */
html{ background:#000 !important; }
body:has(.ljl-header), body:has(.ljl-footer){ background:#000 !important; margin:0; color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; }

/* Font-family/colour safety net: some themes and page builders (Elementor's
   own Global Fonts/Colors included) apply typography at EQUAL specificity
   to a simple "ancestor-class + element" rule — and because their CSS tends
   to print after a plugin's, equal specificity plus !important on both
   sides is won by whichever loads last, which usually isn't us. The fix is
   genuinely HIGHER specificity, not just !important: repeating the same
   class 2–3 times in a compound selector is standard CSS and multiplies the
   "class" specificity column without needing an ID. */
.ljl-hero.ljl-hero.ljl-hero h1,
.ljl-service.ljl-service.ljl-service h3,
.ljl-why__item.ljl-why__item.ljl-why__item h3,
.ljl-step.ljl-step.ljl-step h3,
.ljl-cta__panel.ljl-cta__panel.ljl-cta__panel h2,
.ljl-place__card.ljl-place__card.ljl-place__card h3,
.hdisp.hdisp.hdisp,
.ljl-h2.ljl-h2.ljl-h2{ font-family:var(--display) !important; color:var(--text) !important; }
.ljl-footer.ljl-footer.ljl-footer h4{ font-family:var(--display) !important; color:#fff !important; }
/* .ljl-cta__panel sits on a solid red background — its heading needs white, not --text */
.ljl-cta__panel.ljl-cta__panel.ljl-cta__panel h2{ color:#fff !important; }

.ljl-hero.ljl-hero.ljl-hero p, .ljl-hero.ljl-hero.ljl-hero a,
.ljl-service.ljl-service.ljl-service p,
.ljl-why__item.ljl-why__item.ljl-why__item p,
.ljl-step.ljl-step.ljl-step p,
.ljl-footer.ljl-footer.ljl-footer :is(p,li,a,address),
.ljl-copy.ljl-copy.ljl-copy, .ljl-sub.ljl-sub.ljl-sub{ font-family:var(--body) !important; }

.ljl-red.ljl-red.ljl-red{ color:var(--red-hot) !important; }