/* =====================================================================
   Digital Beaver: bright "digital solutions" theme (ViserLab-inspired)
   Light UI · vivid blue · flat/rounded · playful shapes · wave dividers
   ===================================================================== */

:root{
  --lt-primary:#2f56f0;      /* main blue */
  --lt-primary-d:#1e3ecc;    /* hover */
  --lt-indigo:#6a3df5;       /* accent for gradient */
  --lt-cyan:#17c1e8;         /* accent for gradient */
  --lt-azure:#3a72ff;        /* lighter azure (big blue section) */
  --lt-accent:#17c1e8;

  --lt-ink:#0b1533;          /* headings: near-black navy */
  --lt-ink-2:#1a2547;
  --lt-text:#333c5a;
  --lt-muted:#5b6688;
  --lt-line:#e7ebf5;
  --lt-bg:#ffffff;
  --lt-bg-2:#f5f7fe;         /* light section */
  --lt-soft:#eef3ff;         /* soft blue chip/badge */
  --lt-navy:#0a1230;         /* footer */
  --lt-white:#ffffff;

  --lt-grad:linear-gradient(135deg,#2f56f0 0%,#6a3df5 58%,#17c1e8 100%);
  --lt-grad-azure:linear-gradient(135deg,#3a72ff,#5b8cff);

  --lt-radius:20px;
  --lt-radius-sm:13px;
  --lt-ease:cubic-bezier(.22,.7,.24,1);
  --lt-shadow:0 4px 12px rgba(15,26,72,.05),0 34px 64px -30px rgba(15,26,72,.34);
  --lt-shadow-sm:0 2px 6px rgba(15,26,72,.05),0 16px 34px -22px rgba(15,26,72,.26);

  --lt-font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lt-head:'Poppins',var(--lt-font);
  --lt-container:1180px;
  --lt-pad:clamp(64px,8vw,122px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--lt-font);color:var(--lt-text);background:var(--lt-bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--lt-head);line-height:1.18;color:var(--lt-ink);font-weight:700;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lt-primary);outline-offset:2px;border-radius:6px}

.lt-container{max-width:var(--lt-container);margin:0 auto;padding:0 22px}
.lt-section{position:relative;padding:var(--lt-pad) 0}
.lt-section--tight{padding:clamp(40px,5vw,66px) 0}
.lt-section--gray{background:var(--lt-bg-2)}
.lt-narrow{max-width:820px;margin:0 auto}

/* ---------- typography ---------- */
.lt-h1{font-family:var(--lt-head);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1.06;letter-spacing:-.032em}
.lt-h2{font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.12;letter-spacing:-.028em}
.lt-h3{font-size:clamp(1.1rem,1.6vw,1.34rem);letter-spacing:-.015em}
.lt-lede{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--lt-muted);max-width:60ch;line-height:1.7}
.lt-eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--lt-head);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-primary);margin-bottom:1rem}
.lt-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lt-grad);box-shadow:0 0 0 4px rgba(47,86,240,.12)}
.lt-head{max-width:680px;margin:0 auto clamp(38px,4.5vw,58px);text-align:center}
.lt-head .lt-eyebrow{justify-content:center}
.lt-head--left{margin-left:0;text-align:left}
.lt-head--left .lt-eyebrow{justify-content:flex-start}
.lt-head .lt-lede{margin-inline:auto}
.lt-head--left .lt-lede{margin-inline:0}
.lt-grad-text{background:var(--lt-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.lt-btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--lt-head);font-weight:600;font-size:.97rem;
  padding:.85em 1.7em;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .22s,box-shadow .22s,background .22s,color .2s,border-color .2s;white-space:nowrap}
.lt-btn__i{width:18px;height:18px;transition:transform .22s}
.lt-btn--primary{background:var(--lt-grad);background-size:150% 150%;color:#fff;box-shadow:0 10px 24px -10px rgba(47,86,240,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.lt-btn--primary:hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(47,86,240,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.lt-btn--primary:hover .lt-btn__i{transform:translateX(4px)}
.lt-btn--ghost{background:#fff;color:var(--lt-primary);border-color:#d7e0ff}
.lt-btn--ghost:hover{transform:translateY(-3px);border-color:var(--lt-primary);box-shadow:var(--lt-shadow-sm)}
.lt-btn--glass{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.lt-btn--glass:hover{background:#fff;color:var(--lt-primary);transform:translateY(-3px)}
.lt-btn--sm{padding:.6em 1.25em;font-size:.9rem}
.lt-btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lt-head .lt-btnrow{justify-content:center}
.lt-link{display:inline-flex;align-items:center;gap:.4em;font-family:var(--lt-head);font-weight:600;color:var(--lt-primary)}
.lt-link .lt-icon{width:18px;height:18px;transition:transform .22s}
.lt-link:hover .lt-icon{transform:translateX(4px)}

/* ---------- glass -> white card (kept for inner pages) ---------- */
.glass{background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius);box-shadow:var(--lt-shadow)}
.glass-dark{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--lt-radius)}

/* ---------- icons ---------- */
.lt-icon{display:inline-block;vertical-align:middle}
.lt-icon-badge{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;color:var(--lt-primary);
  background:linear-gradient(150deg,#eef3ff,#e3ecff);
  box-shadow:inset 0 0 0 1px rgba(47,86,240,.14),0 8px 18px -12px rgba(47,86,240,.4);
  flex:none;transition:background .3s var(--lt-ease),color .3s,transform .3s var(--lt-ease),box-shadow .3s}
.lt-icon-badge .lt-icon{width:28px;height:28px}
.lt-icon-soft{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:var(--lt-primary);
  background:linear-gradient(150deg,#eef3ff,#e3ecff);box-shadow:inset 0 0 0 1px rgba(47,86,240,.12);flex:none}

/* ---------- decorative shapes ---------- */
.lt-shape{position:absolute;z-index:0;pointer-events:none;opacity:.9}
.lt-shape--dot{border-radius:50%}
.lt-shape--ring{border-radius:50%;background:transparent;border:6px solid currentColor}
.lt-shape--sq{border-radius:7px;transform:rotate(20deg)}
.lt-shape--zig{width:46px;height:20px;background:
  repeating-linear-gradient(-45deg,currentColor 0 4px,transparent 4px 8px)}
@keyframes ltFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(8deg)}}
.lt-anim-float{animation:ltFloat 6s ease-in-out infinite}

/* =====================================================================
   HEADER
   ===================================================================== */
.lt-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);transition:box-shadow .3s,padding .3s}
.lt-header.is-stuck{box-shadow:0 10px 30px -20px rgba(28,52,120,.4)}
.lt-header__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;transition:padding .3s}
.lt-header.is-stuck .lt-header__in{padding:10px 0}
.lt-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.lt-brand{display:flex;align-items:center;gap:11px;font-family:var(--lt-head);font-weight:800;font-size:1.28rem;color:var(--lt-ink);letter-spacing:-.02em}
.lt-brand img{max-height:44px;width:auto}
.lt-brand__mark{width:40px;height:40px;border-radius:12px;background:var(--lt-grad);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 10px 20px -10px rgba(43,89,247,.8)}
.lt-brand__mark svg{width:22px;height:22px}
.lt-menu{display:flex;align-items:center;gap:2px}
.lt-menu a{font-family:var(--lt-head);font-weight:500;font-size:.95rem;color:var(--lt-text);padding:.5em .85em;border-radius:8px;transition:color .2s,background .2s}
.lt-menu a:hover,.lt-menu .current-menu-item>a{color:var(--lt-primary)}

/* ---- Dropdown (desktop) -------------------------------------------------
   Opens on hover AND on focus-within, so it is reachable by keyboard rather
   than being a mouse-only menu. Nothing here runs below 1000px, where the
   panel styles further down take over. */
.lt-menu li{position:relative}
.lt-menu .menu-item-has-children>a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:.45em;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .2s,opacity .2s}
.lt-menu .menu-item-has-children:hover>a::after,
.lt-menu .menu-item-has-children:focus-within>a::after{opacity:1;transform:rotate(225deg) translate(-2px,-2px)}
.lt-menu .sub-menu{
  position:absolute;top:100%;left:0;z-index:200;min-width:248px;margin:0;padding:8px;
  list-style:none;background:#fff;border:1px solid var(--lt-line);border-radius:14px;
  box-shadow:0 22px 48px -18px rgba(18,24,58,.28);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s var(--lt-ease),transform .18s var(--lt-ease),visibility .18s}
.lt-menu li:hover>.sub-menu,.lt-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.lt-menu .sub-menu li{border:0}
.lt-menu .sub-menu a{display:block;white-space:nowrap;font-size:.9rem;padding:.55em .8em;border-radius:9px}
.lt-menu .sub-menu a:hover,.lt-menu .sub-menu a:focus-visible{background:var(--lt-soft);color:var(--lt-primary)}
/* A hover gap between the parent and the panel would close it mid-travel. */
.lt-menu .menu-item-has-children>.sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
@media(prefers-reduced-motion:reduce){.lt-menu .sub-menu{transition:none}}
.lt-header__cta{display:flex;align-items:center;gap:12px}
.lt-burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--lt-line);background:#fff;color:var(--lt-ink);cursor:pointer;align-items:center;justify-content:center}
.lt-burger svg{width:24px;height:24px}
/* Panel chrome is mobile-only; on desktop .lt-nav is just the header row. */
.lt-nav__top,.lt-nav__foot{display:none}

/* ---------- mobile slide-in panel ----------
   Colours come from the skin variables, so the panel is cream under Lumen,
   near-black under Atelier, and so on without per-skin rules. */
@media(max-width:1000px){
  .lt-nav{
    position:fixed;inset:0 0 0 auto;z-index:70;
    width:min(380px,86vw);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:0 0 max(20px,env(safe-area-inset-bottom));
    background:var(--lt-bg,#fff);
    border-left:1px solid var(--lt-line);
    box-shadow:-40px 0 80px -40px rgba(10,18,48,.55);
    transform:translateX(101%);
    transition:transform .42s var(--lt-ease);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .lt-nav.is-open{transform:translateX(0)}

  /* panel header: label + close */
  .lt-nav__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px 14px;padding-top:max(18px,env(safe-area-inset-top));
    border-bottom:1px solid var(--lt-line);position:sticky;top:0;z-index:2;background:inherit}
  .lt-nav__title{font-family:var(--lt-head);font-weight:600;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--lt-muted)}
  .lt-nav__close{width:42px;height:42px;flex:none;display:grid;place-items:center;cursor:pointer;
    border:1px solid var(--lt-line);border-radius:12px;background:transparent;color:var(--lt-ink);
    transition:background .2s,color .2s,border-color .2s,transform .2s}
  .lt-nav__close svg{width:20px;height:20px}
  .lt-nav__close:hover,.lt-nav__close:focus-visible{background:var(--lt-primary);border-color:var(--lt-primary);color:#fff;transform:rotate(90deg)}

  /* links */
  .lt-menu{flex-direction:column;align-items:stretch;gap:0;padding:6px 12px 0}
  .lt-menu li{border-bottom:1px solid var(--lt-line)}
  .lt-menu li:last-child{border-bottom:0}
  .lt-menu a{position:relative;display:flex;align-items:center;min-height:54px;
    padding:.7em 12px .7em 14px;font-size:1.06rem;font-weight:500;color:var(--lt-ink);border-radius:0}
  /* chevron, drawn in CSS so it needs no extra markup */
  .lt-menu a::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
    border-right:2px solid var(--lt-muted);border-bottom:2px solid var(--lt-muted);
    transform:translateY(-50%) rotate(-45deg);opacity:.55;transition:transform .22s,opacity .22s,border-color .22s}
  .lt-menu a:hover::after{opacity:1;border-color:var(--lt-primary);transform:translate(4px,-50%) rotate(-45deg)}
  /* accent bar on the page you are on */
  .lt-menu a::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;
    background:var(--lt-primary);transform:translateY(-50%);transition:height .25s var(--lt-ease)}
  .lt-menu .current-menu-item>a::before,.lt-menu a:hover::before{height:26px}
  .lt-menu .current-menu-item>a{color:var(--lt-primary)}

  /* In the slide-in panel a floating dropdown makes no sense: the panel is
     already a scrolling column, so children simply sit indented under their
     parent and are always reachable by thumb. */
  .lt-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;padding:0 0 6px 14px;border:0;border-radius:0;box-shadow:none;background:transparent}
  .lt-menu .sub-menu li{border-bottom:1px solid var(--lt-line)}
  .lt-menu .sub-menu li:last-child{border-bottom:0}
  .lt-menu .sub-menu a{min-height:46px;font-size:.9rem;white-space:normal;opacity:.85}
  /* The parent keeps its own chevron for desktop; on mobile it would point at a
     dropdown that does not exist. */
  .lt-menu .menu-item-has-children>a::after{display:none}
  .lt-menu .sub-menu a::after{display:none}

  /* staggered entrance: the panel arrives, then its contents settle in */
  .lt-nav__top,.lt-menu li,.lt-nav .lt-btn,.lt-nav__foot{opacity:0;transform:translateX(14px);
    transition:opacity .3s ease,transform .3s var(--lt-ease)}
  .lt-nav.is-open .lt-nav__top,.lt-nav.is-open .lt-menu li,
  .lt-nav.is-open .lt-btn,.lt-nav.is-open .lt-nav__foot{opacity:1;transform:none}
  .lt-nav.is-open .lt-nav__top{transition-delay:.06s}
  .lt-nav.is-open .lt-menu li:nth-child(1){transition-delay:.10s}
  .lt-nav.is-open .lt-menu li:nth-child(2){transition-delay:.14s}
  .lt-nav.is-open .lt-menu li:nth-child(3){transition-delay:.18s}
  .lt-nav.is-open .lt-menu li:nth-child(4){transition-delay:.22s}
  .lt-nav.is-open .lt-menu li:nth-child(5){transition-delay:.26s}
  .lt-nav.is-open .lt-menu li:nth-child(6){transition-delay:.30s}
  .lt-nav.is-open .lt-menu li:nth-child(n+7){transition-delay:.34s}
  .lt-nav.is-open .lt-btn{transition-delay:.36s}
  .lt-nav.is-open .lt-nav__foot{transition-delay:.40s}

  /* CTA and contact strip settle against the bottom of the panel, so a short
     menu does not leave a dead zone under it. `auto` still collapses to the
     natural gap once the links are long enough to fill the panel. */
  .lt-nav .lt-btn{margin:auto 20px 0;justify-content:center;padding:.95em 1.5em;font-size:1rem}

  /* call / whatsapp strip */
  .lt-nav__foot{display:flex;flex-direction:column;gap:2px;margin:18px 20px 0;padding-top:16px;
    border-top:1px solid var(--lt-line)}
  .lt-nav__foot a{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--lt-muted);
    font-size:.95rem;transition:color .2s}
  .lt-nav__foot a:hover{color:var(--lt-primary)}
  .lt-nav__foot svg{width:18px;height:18px;flex:none;color:var(--lt-primary)}

  .lt-burger{display:inline-flex}
  .lt-nav-backdrop{position:fixed;inset:0;background:rgba(10,18,48,.55);backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:65}
  .lt-nav-backdrop.is-open{opacity:1;visibility:visible}
}

/* The sticky header carries a backdrop-filter, which makes it the containing
   block for its position:fixed children, that clipped the panel to the height
   of the header itself. Drop the filter only while the panel is open, when the
   header sits behind the backdrop and the blur is not visible anyway.
   The `html` prefix is deliberate: it outranks the per-skin
   `body.lt-style-* .lt-header` rules, which load after this file. */
html body.lt-nav-open .lt-header{backdrop-filter:none;-webkit-backdrop-filter:none}

/* The other half of that same problem. While the panel is CLOSED it is still
   trapped in the header's containing block, parked at translateX(101%) just
   past the right edge, so it stretched the document's scrollable width and
   the whole page could be dragged sideways on phones. `body{overflow-x:hidden}`
   cannot catch it, because a fixed element is only clipped by the ancestor that
   is its containing block, which here is the header.
   Clipping the header horizontally contains the parked panel. Once it opens the
   rule above removes the backdrop-filter, the header stops being the containing
   block, and the panel escapes this clip to run full height as intended.
   `clip` (not `hidden`) on one axis leaves the other axis visible, so the
   stuck-header box-shadow still paints below the header. */
.lt-header{overflow-x:clip}

/* The floating WhatsApp button and the scroll bar live above the header's
   stacking context, so they would hover over the dimmed page while the menu is
   open. Take them out of the way for as long as the panel is up. */
body.lt-nav-open .lt-wa-float{opacity:0;pointer-events:none;transition:opacity .25s}
body.lt-nav-open .lt-progress{opacity:0}

@media(prefers-reduced-motion:reduce){
  .lt-nav__top,.lt-menu li,.lt-nav .lt-btn,.lt-nav__foot{opacity:1!important;transform:none!important;transition:none!important}
  .lt-nav__close:hover{transform:none}
}

/* =====================================================================
   HERO (light, centered, floating shapes)
   ===================================================================== */
.lt-hero{position:relative;text-align:center;padding:clamp(56px,8vw,96px) 0 clamp(60px,8vw,90px);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 80% at 50% -10%,#eaf1ff 0%,#fff 60%)}
.lt-hero__in{position:relative;z-index:2;max-width:860px;margin:0 auto}
.lt-rating{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--lt-line);box-shadow:var(--lt-shadow-sm);border-radius:999px;padding:.4em .95em;margin-bottom:20px}
/* Trust pill under the hero headline. Carries a plain claim, no star rating. */
.lt-rating span{color:var(--lt-text);font-size:.86rem;font-weight:500}
.lt-hero h1{color:var(--lt-ink)}
.lt-hero h1 em{font-style:normal;color:var(--lt-primary)}
.lt-hero__sub{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--lt-muted);max-width:60ch;margin:1.1rem auto 1.4rem}
.lt-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 26px;max-width:680px}
.lt-tags span{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:500;color:var(--lt-text);background:#fff;border:1px solid var(--lt-line);border-radius:999px;padding:.4em .9em}
.lt-tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lt-primary)}
.lt-hero .lt-btnrow{justify-content:center}
.lt-hero__shapes span{position:absolute;z-index:0}

/* hero typing line */
.lt-typed{font-family:var(--lt-head);font-weight:700;font-size:clamp(1.4rem,2.8vw,2.2rem);letter-spacing:-.02em;margin:-.2rem 0 1rem;line-height:1.2}
.lt-typed__pre{color:var(--lt-ink)}
.lt-typed__word{background:var(--lt-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  border-right:2px solid var(--lt-primary);padding-right:3px;animation:ltCaret 1.05s step-end infinite}
@keyframes ltCaret{50%{border-color:transparent}}

/* =====================================================================
   ABOUT split
   ===================================================================== */
.lt-two{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr 1fr;align-items:center}
.lt-aside{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1.5fr .7fr;align-items:start}
.lt-founder{display:grid;gap:32px;grid-template-columns:260px 1fr;align-items:center}
@media(max-width:860px){.lt-two,.lt-aside,.lt-founder{grid-template-columns:1fr}}
.lt-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--lt-shadow);aspect-ratio:4/3;background:linear-gradient(135deg,#eaf1ff,#dbe6ff)}
.lt-media img{width:100%;height:100%;object-fit:cover}
.lt-media--illus{display:grid;place-items:center}
.lt-illus{position:relative;width:78%;aspect-ratio:1;display:grid;place-items:center}
.lt-illus__hub{width:46%;aspect-ratio:1;border-radius:26px;background:var(--lt-grad);display:grid;place-items:center;color:#fff;box-shadow:0 24px 44px -20px rgba(43,89,247,.8)}
.lt-illus__hub svg{width:44%;height:44%}
.lt-illus i{position:absolute;width:54px;height:54px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--lt-primary);box-shadow:var(--lt-shadow-sm)}
.lt-illus i svg{width:26px;height:26px}
.lt-checks{display:grid;gap:12px;margin-top:18px}
.lt-checks li{display:flex;gap:10px;align-items:flex-start;color:var(--lt-text)}
.lt-checks .lt-icon{color:#fff;background:var(--lt-primary);border-radius:50%;width:22px;height:22px;padding:3px;flex:none}

/* =====================================================================
   GRID CARDS
   ===================================================================== */
.lt-grid{display:grid;gap:24px}
.lt-grid--3{grid-template-columns:repeat(3,1fr)}
.lt-grid--4{grid-template-columns:repeat(4,1fr)}
.lt-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.lt-grid--3,.lt-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.lt-grid--2,.lt-grid--3,.lt-grid--4{grid-template-columns:1fr}}

.lt-card{position:relative;background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius);padding:30px 26px;box-shadow:var(--lt-shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.lt-card{transition:transform .35s var(--lt-ease),box-shadow .35s,border-color .35s}
.lt-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.lt-card:hover{transform:translateY(-8px);box-shadow:var(--lt-shadow);border-color:#cfdbff}
.lt-card:hover .lt-icon-badge{background:var(--lt-grad);color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(47,86,240,.6)}
.lt-card h3{margin:18px 0 8px;font-size:1.2rem}
.lt-card p{color:var(--lt-muted);font-size:.97rem;margin-bottom:0}
.lt-card__link{margin-top:16px}
.lt-card__glow{display:none}
.lt-card__list{margin-top:14px;display:grid;gap:8px}
.lt-card__list li{display:flex;gap:9px;align-items:flex-start;color:var(--lt-text);font-size:.94rem}
.lt-card__list .lt-icon{color:var(--lt-primary);width:18px;height:18px;margin-top:3px;flex:none}
/* compact offering card: icon left */
.lt-card--row{display:flex;gap:16px;align-items:flex-start;padding:24px}
.lt-card--row .lt-icon-badge{width:52px;height:52px;border-radius:14px}
.lt-card--row .lt-icon-badge .lt-icon{width:24px;height:24px}
.lt-card--row h3{margin:0 0 6px;font-size:1.08rem}

.lt-tile{display:flex;gap:18px;align-items:flex-start;padding:26px;background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius);box-shadow:var(--lt-shadow-sm);transition:transform .3s,box-shadow .3s}
.lt-tile:hover{transform:translateY(-6px);box-shadow:var(--lt-shadow)}
.lt-tile h3{font-size:1.1rem;margin:0 0 6px}
.lt-tile p{color:var(--lt-muted);margin:0;font-size:.95rem}

/* Four-up tiles (the "why choose us" row) are ~266px wide. Beside a 54px icon
   that leaves the copy roughly 142px of measure, about 20 characters, enough
   to strand "international" and "long term" on their own lines. Stacking the
   icon hands that width back, so the same text reads on half as many lines.
   The two-up tiles on the About page are wide enough to keep the icon beside
   the text, so this is deliberately scoped to the four-up grid. */
.lt-grid--4 .lt-tile{flex-direction:column;gap:15px;padding:28px 26px}
.lt-grid--4 .lt-tile h3{font-size:1.12rem;line-height:1.35;margin:0 0 9px;text-wrap:balance}
.lt-grid--4 .lt-tile p{line-height:1.65;text-wrap:pretty}
@media(max-width:980px){.lt-grid--4 .lt-tile{padding:26px}}
/* A title that wraps to two lines pushes its own body copy down, so the four
   cards start their text at different heights. Subgrid puts the icon, title
   and body of every card on shared row tracks, which lines them up without a
   min-height guess that would add dead space if every title were short.
   Browsers without subgrid keep the plain stacked layout above. */
@supports (grid-template-rows:subgrid){
  .lt-grid--4 .lt-tile{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:15px}
  .lt-grid--4 .lt-tile > div{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:9px}
  .lt-grid--4 .lt-tile h3{margin:0}
}

/* =====================================================================
   FEATURED SOLUTIONS (promo + package cards)
   ===================================================================== */
.lt-featured{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:stretch}
@media(max-width:900px){.lt-featured{grid-template-columns:1fr}}
.lt-promo{position:relative;overflow:hidden;border-radius:22px;color:#fff;padding:38px 34px;display:flex;flex-direction:column;justify-content:center;
  background:var(--lt-primary)}
.lt-promo h3{color:#fff;font-size:1.7rem;margin-bottom:.5em}
.lt-promo p{color:rgba(255,255,255,.88)}
.lt-promo .lt-btn{align-self:flex-start;margin-top:10px}
.lt-promo__deco{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.lt-featured__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.lt-featured__grid{grid-template-columns:1fr}}

/* =====================================================================
   PROJECTS (portfolio kept)
   ===================================================================== */
.lt-project{position:relative;border-radius:var(--lt-radius);overflow:hidden;background:linear-gradient(160deg,#2b59f7,#141c3a);border:1px solid var(--lt-line);box-shadow:var(--lt-shadow-sm);transition:transform .3s,box-shadow .3s;min-height:300px;display:flex}
.lt-project:hover{transform:translateY(-8px);box-shadow:var(--lt-shadow)}
.lt-project__img{position:absolute;inset:0;z-index:0}
.lt-project__img img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s}
.lt-project:hover .lt-project__img img{transform:scale(1.06)}
.lt-project__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,24,58,.05),rgba(15,24,58,.88))}
.lt-project__body{position:relative;z-index:2;margin-top:auto;padding:26px;color:#fff}
.lt-project__tag{display:inline-block;font-size:.72rem;font-family:var(--lt-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--lt-primary);padding:.35em .8em;border-radius:999px;margin-bottom:12px}
.lt-project h3{color:#fff;font-size:1.25rem;margin:0 0 6px}
.lt-project p{color:#dbe1f2;font-size:.95rem;margin:0}
.lt-project__meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:16px;color:#c3cbe4;font-size:.85rem}
.lt-project__meta b{color:#fff}

/* =====================================================================
   HORIZONTAL JOURNEY (How We Empower)
   ===================================================================== */
.lt-journey{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin-top:40px}
.lt-journey::before{content:"";position:absolute;top:29px;left:6%;right:6%;height:3px;background:linear-gradient(90deg,var(--lt-line),var(--lt-primary))}
.lt-jstep{position:relative;text-align:center;padding:0 8px}
.lt-jstep__dot{position:relative;z-index:1;width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:#fff;border:2px solid #dbe6ff;display:grid;place-items:center;color:var(--lt-primary);box-shadow:var(--lt-shadow-sm);transition:.25s}
.lt-jstep:hover .lt-jstep__dot{background:var(--lt-primary);color:#fff;border-color:var(--lt-primary);transform:translateY(-4px)}
.lt-jstep__dot .lt-icon{width:26px;height:26px}
.lt-jstep b{display:block;font-family:var(--lt-head);color:var(--lt-ink);font-size:.98rem}
.lt-jstep small{color:var(--lt-muted);font-size:.8rem;font-family:var(--lt-head);font-weight:600}
/* Stacked journey: the connector turns vertical rather than switching off, that
   line is what makes the six dots read as one path instead of a feature list.
   36.5px = the dot's centre (8px .lt-jstep padding + 30px half-dot) less half the
   3px rule. It runs behind the dots, which are opaque and already z-index:1. */
@media(max-width:820px){.lt-journey{grid-auto-flow:row;grid-auto-columns:auto;gap:22px}.lt-journey::before{top:30px;bottom:30px;left:36.5px;right:auto;width:3px;height:auto;background:linear-gradient(180deg,var(--lt-line),var(--lt-primary))}.lt-jstep{display:flex;align-items:center;gap:16px;text-align:left}.lt-jstep__dot{margin:0}}

/* =====================================================================
   VERTICAL WORK PROCESS (zigzag)
   ===================================================================== */
.lt-vsteps{position:relative;max-width:820px;margin:40px auto 0}
.lt-vsteps::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:repeating-linear-gradient(#cfe0ff 0 8px,transparent 8px 16px);transform:translateX(-50%)}
.lt-vstep{position:relative;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-bottom:26px}
.lt-vstep__card{background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius);box-shadow:var(--lt-shadow-sm);padding:22px 24px;transition:transform .3s,box-shadow .3s}
.lt-vstep__card:hover{transform:translateY(-5px);box-shadow:var(--lt-shadow)}
.lt-vstep__card h3{font-size:1.12rem;margin:0 0 6px}
.lt-vstep__card p{color:var(--lt-muted);margin:0;font-size:.94rem}
.lt-vstep__num{position:relative;z-index:1;width:56px;height:56px;margin:0 auto;border-radius:50%;background:var(--lt-primary);color:#fff;display:grid;place-items:center;font-family:var(--lt-head);font-weight:700;box-shadow:0 12px 26px -12px rgba(43,89,247,.9)}
/* All three children share row 1. Without this, grid auto-placement, which only
   moves forward, cannot put the number back in an earlier column than the card
   that precedes it in the DOM, so it drops to a row of its own. That broke every
   even step on desktop (card in column 3, number in column 2) and every step on
   mobile (card in column 2, number in column 1). */
.lt-vstep__card,.lt-vstep__num,.lt-vstep__blank{grid-row:1}
.lt-vstep:nth-child(odd) .lt-vstep__card{grid-column:1;text-align:right}
.lt-vstep:nth-child(odd) .lt-vstep__num{grid-column:2}
.lt-vstep:nth-child(even) .lt-vstep__card{grid-column:3}
.lt-vstep:nth-child(even) .lt-vstep__num{grid-column:2}
.lt-vstep:nth-child(even) .lt-vstep__blank{grid-column:1}
.lt-vstep:nth-child(odd) .lt-vstep__blank{grid-column:3}
@media(max-width:720px){
  .lt-vsteps::before{left:27px}
  .lt-vstep{grid-template-columns:56px 1fr;gap:16px}
  .lt-vstep__num,.lt-vstep:nth-child(odd) .lt-vstep__num,.lt-vstep:nth-child(even) .lt-vstep__num{grid-column:1}
  .lt-vstep__card,.lt-vstep:nth-child(odd) .lt-vstep__card,.lt-vstep:nth-child(even) .lt-vstep__card{grid-column:2;text-align:left}
  .lt-vstep__blank{display:none}
}

/* =====================================================================
   STATS / ACHIEVEMENTS (blue full-bleed with waves + orbit)
   ===================================================================== */
.lt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lt-stat{padding:22px;text-align:center}
.lt-stat__num{font-family:var(--lt-head);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1;color:var(--lt-primary)}
.lt-stat__label{color:var(--lt-muted);font-size:.92rem;margin-top:.5rem}
@media(max-width:760px){.lt-stats{grid-template-columns:repeat(2,1fr)}}

/* Follows the brand colour. It used to sit on --lt-azure, a fixed blue that
   Theme Settings never touches, so this band stayed blue while the rest of the
   site recoloured. */
.lt-achieve{position:relative;color:#fff;padding:clamp(70px,9vw,120px) 0;background:var(--lt-primary);overflow:hidden}
.lt-achieve__wave{position:absolute;left:0;width:100%;line-height:0;color:#fff}
.lt-achieve__wave--top{top:-1px}
.lt-achieve__wave--bot{bottom:-1px;transform:rotate(180deg)}
.lt-achieve__wave svg{width:100%;height:60px;display:block}
.lt-achieve__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:900px){.lt-achieve__in{grid-template-columns:1fr}}
.lt-achieve h2{color:#fff}
.lt-achieve .lt-eyebrow{color:rgba(255,255,255,.85)}
.lt-achieve .lt-eyebrow::before{background:rgba(255,255,255,.8)}
.lt-achieve p{color:rgba(255,255,255,.88)}
.lt-achieve .lt-btn--glass{margin-top:8px}
.lt-achieve__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);margin-top:30px}
/* The number is the point of this band, so it is sized as a display element
   rather than as bold body text. tabular-nums keeps every digit the same
   width, so the count-up animation does not jitter its own layout as it runs
   from 0 to the target. */
.lt-achieve__stat b{font-family:var(--lt-head);font-weight:800;font-size:clamp(2.6rem,5.2vw,4rem);color:#fff;display:block;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lt-achieve__stat span{color:rgba(255,255,255,.85);font-size:clamp(.95rem,1.1vw,1.05rem);display:block;margin-top:6px}

/* orbit cluster */
.lt-orbit{position:relative;width:min(420px,90%);aspect-ratio:1;margin:0 auto}
.lt-orbit__ring{position:absolute;border:1px dashed rgba(255,255,255,.35);border-radius:50%}
.lt-orbit__ring--1{inset:8%}.lt-orbit__ring--2{inset:24%}
.lt-orbit__hub{position:absolute;top:50%;left:50%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:26px;background:#fff;color:var(--lt-primary);display:grid;place-items:center;box-shadow:0 20px 40px -18px rgba(0,0,0,.4)}
.lt-orbit__hub svg{width:46px;height:46px}
.lt-orbit i{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px;border-radius:16px;background:#fff;display:grid;place-items:center;color:var(--lt-primary);box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.lt-orbit i svg{width:26px;height:26px}
@keyframes ltOrbitSpin{to{transform:rotate(360deg)}}
.lt-orbit__ring--2{animation:ltOrbitSpin 40s linear infinite}
.lt-orbit__ring--1{animation:ltOrbitSpin 60s linear infinite reverse}

/* =====================================================================
   TESTIMONIALS (big 66 + avatars)
   ===================================================================== */
.lt-testi{position:relative;max-width:820px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--lt-line);border-radius:26px;box-shadow:var(--lt-shadow);padding:clamp(34px,5vw,60px)}
.lt-testi__mark{font-family:var(--lt-head);font-weight:800;font-size:4rem;line-height:.6;color:var(--lt-primary);opacity:.18}
.lt-testi .lt-stars{color:#ffb020;justify-content:center;margin:8px 0 14px}
.lt-testi blockquote{margin:0}
.lt-testi p{font-size:clamp(1.05rem,1.6vw,1.32rem);color:var(--lt-ink);font-family:var(--lt-head);font-weight:500;line-height:1.6}
.lt-testi__by{margin-top:18px}
.lt-testi__by b{font-family:var(--lt-head);color:var(--lt-ink);display:block}
.lt-testi__by span{color:var(--lt-muted);font-size:.9rem}
.lt-testi__avs{position:absolute;inset:0;pointer-events:none}
.lt-testi__avs img,.lt-testi__avs span{position:absolute;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:var(--lt-shadow-sm);border:3px solid #fff}
.lt-testi__avs .a1{top:14%;left:-26px}.lt-testi__avs .a2{top:60%;left:-14px}
.lt-testi__avs .a3{top:20%;right:-26px}.lt-testi__avs .a4{top:66%;right:-14px}
.lt-av-ph{background:var(--lt-grad);color:#fff;display:grid;place-items:center;font-family:var(--lt-head);font-weight:700}
@media(max-width:680px){.lt-testi__avs{display:none}}
.lt-stars{display:inline-flex;gap:2px}
.lt-star{width:17px;height:17px;fill:currentColor;stroke:currentColor}

/* =====================================================================
   FAQ
   ===================================================================== */
.lt-faq{max-width:840px;margin:0 auto;display:grid;gap:14px}
.lt-faq__item{background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius-sm);box-shadow:var(--lt-shadow-sm);overflow:hidden}
.lt-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:20px 22px;background:none;border:0;cursor:pointer;font-family:var(--lt-head);font-weight:600;font-size:1.04rem;color:var(--lt-ink)}
.lt-faq__q .lt-icon{width:22px;height:22px;color:var(--lt-primary);transition:transform .3s;flex:none}
.lt-faq__item.is-open .lt-faq__q .lt-icon{transform:rotate(180deg)}
.lt-faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.lt-faq__a-in{padding:0 22px 22px;color:var(--lt-muted)}
.lt-faq__a-in p:last-child{margin-bottom:0}

/* =====================================================================
   CTA band + page hero
   ===================================================================== */
.lt-cta-wrap{padding-top:0}
/* Flat brand colour. This used to lay a hardcoded blue radial over the brand
   colour, which read as a blue-to-brand smear for any palette that was not the
   original blue. Text tints are white-alpha for the same reason. */
.lt-cta{position:relative;text-align:center;color:#fff;padding:clamp(44px,6vw,72px) clamp(24px,5vw,60px);border-radius:28px;overflow:hidden;
  background:var(--lt-primary)}
.lt-cta h2,.lt-cta .lt-eyebrow{color:#fff}
.lt-cta .lt-eyebrow::before{background:rgba(255,255,255,.8)}
.lt-cta .lt-lede{color:rgba(255,255,255,.88);margin:0 auto 26px}
.lt-cta .lt-btnrow{justify-content:center}
.lt-cta__glow{display:none}

.lt-pagehero{position:relative;padding:clamp(60px,8vw,96px) 0 clamp(36px,4vw,56px);overflow:hidden;isolation:isolate;text-align:center;background:radial-gradient(120% 80% at 50% -20%,#eaf1ff,#fff 65%)}
.lt-pagehero .lt-bg{display:none}
.lt-pagehero .lt-blob{display:none}
.lt-pagehero__in{max-width:800px;margin:0 auto;position:relative;z-index:2}

/* =====================================================================
   FORMS
   ===================================================================== */
.lt-contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:32px;align-items:start}
@media(max-width:900px){.lt-contact-grid{grid-template-columns:1fr}}
.lt-form{display:grid;gap:16px;padding:clamp(24px,3vw,38px)}
.lt-form h3{margin:0 0 4px}
.lt-field{display:grid;gap:6px}
.lt-field label{font-family:var(--lt-head);font-weight:600;font-size:.9rem;color:var(--lt-ink)}
.lt-field input,.lt-field select,.lt-field textarea{width:100%;padding:.85em 1em;border:1px solid var(--lt-line);border-radius:12px;background:#fbfcff;font-family:inherit;font-size:1rem;color:var(--lt-text);transition:border .2s,box-shadow .2s}
.lt-field input:focus,.lt-field select:focus,.lt-field textarea:focus{outline:none;border-color:var(--lt-primary);box-shadow:0 0 0 4px rgba(43,89,247,.12)}
.lt-field textarea{min-height:130px;resize:vertical}
.lt-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.lt-form__row{grid-template-columns:1fr}}
.lt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lt-note{font-size:.85rem;color:var(--lt-muted)}
.lt-alert{padding:16px 18px;border-radius:12px;font-size:.96rem}
.lt-alert--ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#15803d}
.lt-alert--err{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:#b91c1c}
.lt-contact-cards{display:grid;gap:14px}
.lt-cinfo{display:flex;gap:14px;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--lt-line);border-radius:var(--lt-radius-sm);box-shadow:var(--lt-shadow-sm)}
.lt-cinfo b{display:block;font-family:var(--lt-head);color:var(--lt-ink)}
.lt-cinfo span,.lt-cinfo a{color:var(--lt-muted);font-size:.96rem}
.lt-cinfo a:hover{color:var(--lt-primary)}
/* WhatsApp featured card: uses the brand primary, so it follows Theme Settings
   rather than sitting as a green block against the palette. */
.lt-cinfo--wa{background:var(--lt-primary) !important;border:1px solid var(--lt-primary) !important;text-decoration:none;transition:transform .25s,box-shadow .25s}
.lt-cinfo--wa:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px var(--lt-primary)}
.lt-cinfo--wa .lt-icon-soft{background:rgba(255,255,255,.2) !important;color:#fff !important;border:0 !important;box-shadow:none !important}
.lt-cinfo--wa b{color:#fff !important}
.lt-cinfo--wa .lt-cinfo__sub{display:block;color:rgba(255,255,255,.9) !important;font-size:.9rem}
.lt-cinfo--wa:hover .lt-cinfo__sub{color:#fff !important}

/* =====================================================================
   PRICING
   ===================================================================== */
.lt-price{display:flex;flex-direction:column;padding:30px 26px;position:relative}
.lt-price.is-hot{border-color:var(--lt-primary);box-shadow:0 26px 50px -24px rgba(43,89,247,.5)}
.lt-price__badge{position:absolute;top:18px;right:18px;font-size:.7rem;font-family:var(--lt-head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--lt-primary);padding:.4em .8em;border-radius:999px}
.lt-price h3{font-size:1.25rem;margin:0 0 6px}
.lt-price__sum{color:var(--lt-muted);font-size:.94rem;min-height:42px}
.lt-price__amt{font-family:var(--lt-head);font-weight:800;font-size:1.9rem;margin:12px 0;color:var(--lt-ink);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lt-price__amt small{font-size:.82rem;font-weight:500;color:var(--lt-muted)}
.lt-price .lt-card__list{flex:1;margin:8px 0 22px}
.lt-price .lt-btn{width:100%;justify-content:center}

/* =====================================================================
   FOOTER
   ===================================================================== */
.lt-footer{position:relative;color:#c3cbe4;background:var(--lt-navy);padding:70px 0 28px;overflow:hidden}
.lt-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:900px){.lt-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lt-footer__grid{grid-template-columns:1fr}}
.lt-footer h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.lt-footer a{color:#aab2d0;transition:color .2s}
.lt-footer a:hover{color:#fff}
.lt-footer ul{display:grid;gap:10px}
.lt-footer__brand .lt-brand{color:#fff;margin-bottom:14px}
.lt-footer__brand p{color:#93a0c4;max-width:34ch}
.lt-socials{display:flex;gap:10px;margin-top:18px}
.lt-socials a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;transition:.25s}
.lt-socials a:hover{background:var(--lt-primary);transform:translateY(-3px);border-color:transparent}
.lt-socials .lt-icon{width:20px;height:20px}
.lt-footer__contact li{display:flex;gap:10px;align-items:flex-start}
.lt-footer__contact .lt-icon{color:var(--lt-accent);width:19px;height:19px;margin-top:3px;flex:none}
.lt-footer__bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:24px;color:#8590b4;font-size:.9rem}

/* =====================================================================
   PROSE
   ===================================================================== */
.lt-prose{color:var(--lt-text);font-size:1.05rem;line-height:1.8}
.lt-prose h2,.lt-prose h3{margin-top:1.6em}
.lt-prose p{margin-bottom:1.1rem}
.lt-prose ul{list-style:none;display:grid;gap:10px;margin:0 0 1.2rem}
.lt-prose ul li{position:relative;padding-left:30px}
.lt-prose ul li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--lt-soft);box-shadow:inset 0 0 0 2px var(--lt-primary)}

/* Tables in article prose. Wrapped in .lt-table-wrap so a wide price table
   scrolls inside its own box instead of forcing the page sideways on a phone. */
.lt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.75rem 0}
.lt-prose table{width:100%;border-collapse:collapse;font-size:.925rem;min-width:520px}
.lt-prose thead th{
  text-align:left;font-weight:600;white-space:nowrap;
  padding:.7rem .9rem;border-bottom:2px solid var(--lt-primary);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
}
.lt-prose tbody td{padding:.75rem .9rem;border-bottom:1px solid rgba(128,128,128,.22);vertical-align:top}
.lt-prose tbody tr:last-child td{border-bottom:none}
.lt-prose tbody td:first-child{font-weight:600}
.lt-prose tbody td:nth-child(2){white-space:nowrap}
@media(max-width:520px){.lt-prose table{font-size:.85rem}}

/* =====================================================================
   PREMIUM POLISH: orbs · trust strip · dashboard mockup · grain
   ===================================================================== */

/* soft blurred gradient orbs (replace confetti) */
.lt-orb{position:absolute;z-index:0;border-radius:50%;filter:blur(48px);opacity:.5;pointer-events:none}
.lt-ring2{position:absolute;z-index:0;border-radius:50%;border:1.5px solid rgba(47,86,240,.16);pointer-events:none}
.lt-dotgrid{position:absolute;z-index:0;pointer-events:none;opacity:.55;background-image:radial-gradient(rgba(47,86,240,.28) 1.3px,transparent 1.3px);background-size:17px 17px}

/* trusted / built-with strip */
.lt-trust{margin-top:46px;text-align:center}
.lt-trust__label{font-family:var(--lt-head);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lt-muted);margin-bottom:16px}
.lt-trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 36px}
.lt-trust__row span{font-family:var(--lt-head);font-weight:700;font-size:1.06rem;color:#a2aac2;letter-spacing:-.01em;transition:color .25s var(--lt-ease)}
.lt-trust__row span:hover{color:var(--lt-ink)}

/* CSS dashboard mockup (about section) */
.lt-dashwrap{position:relative;display:grid;place-items:center;padding:6%}
.lt-dashwrap .lt-orb{width:70%;height:70%;left:15%;top:12%;background:radial-gradient(circle,rgba(47,86,240,.5),transparent 62%)}
.lt-dash{position:relative;z-index:1;width:100%;background:#fff;border:1px solid var(--lt-line);border-radius:20px;box-shadow:var(--lt-shadow)}
.lt-dash__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--lt-line);background:#f7f9ff;border-radius:20px 20px 0 0}
.lt-dash__bar i{width:10px;height:10px;border-radius:50%;background:#d4dbef}
.lt-dash__bar i:nth-child(1){background:#ff5f57}.lt-dash__bar i:nth-child(2){background:#febc2e}.lt-dash__bar i:nth-child(3){background:#28c840}
.lt-dash__body{display:grid;grid-template-columns:60px 1fr;gap:16px;padding:18px}
.lt-dash__side{display:grid;gap:9px;align-content:start}
.lt-dash__side i{height:9px;border-radius:5px;background:#eef1f8}
.lt-dash__side i:first-child{background:var(--lt-grad);height:11px}
.lt-dash__main{display:grid;gap:13px}
.lt-dash__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lt-dash__tile{border:1px solid var(--lt-line);border-radius:12px;padding:11px 12px}
.lt-dash__tile b{display:block;font-family:var(--lt-head);font-weight:800;color:var(--lt-ink);font-size:1.08rem;line-height:1}
.lt-dash__tile span{display:block;height:6px;width:72%;border-radius:4px;background:#eef1f8;margin-top:7px}
.lt-dash__tile:nth-child(2) b{color:var(--lt-primary)}
.lt-dash__chart{display:flex;align-items:flex-end;gap:8px;height:104px;border:1px solid var(--lt-line);border-radius:12px;padding:13px}
.lt-dash__chart i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#cdd9ff,#eaeffc);transform-origin:bottom;animation:ltDbar 3.4s ease-in-out infinite}
.lt-dash__chart i:nth-child(3n){background:var(--lt-grad)}
@keyframes ltDbar{0%,100%{transform:scaleY(.68)}50%{transform:scaleY(1)}}

/* fine grain on the deep-blue surfaces */
.lt-achieve::after,.lt-cta::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px}

/* subtle texture on portfolio cards */
.lt-project::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:18px 18px}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.lt-js .reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .lt-anim-float,.lt-orbit i,.lt-orbit__ring,.lt-dash__chart i{animation:none!important}
  *{transition-duration:.001ms!important}
}

/* scroll progress */
.lt-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;background:transparent}
.lt-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--lt-grad);transition:transform .1s linear}

/* =====================================================================
   PORTFOLIO: browser-frame screenshots (scroll on hover) + gallery
   ===================================================================== */
.lt-works{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.lt-works{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lt-works{grid-template-columns:1fr}}
.lt-work{display:flex;flex-direction:column;background:#fff;color:inherit;border:1px solid var(--lt-line);border-radius:var(--lt-radius);
  box-shadow:var(--lt-shadow-sm);overflow:hidden;transition:transform .3s var(--lt-ease),box-shadow .3s,border-color .3s}
.lt-work:hover{transform:translateY(-8px);box-shadow:var(--lt-shadow);border-color:#cfdbff}
.lt-work:hover .lt-link .lt-icon{transform:translateX(4px)}
.lt-work__frame{position:relative;display:block;background:#eef2fa}
.lt-work__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--lt-line)}
.lt-work__bar i{width:9px;height:9px;border-radius:50%;background:#dce2f0;flex:none}
.lt-work__bar i:nth-child(1){background:#ff5f57}.lt-work__bar i:nth-child(2){background:#febc2e}.lt-work__bar i:nth-child(3){background:#28c840}
.lt-work__url{margin-left:6px;flex:1;font-family:var(--lt-mono);font-size:.7rem;color:var(--lt-muted);background:#f2f5fc;
  border-radius:999px;padding:.3em .8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-work__shot{--lt-shot-h:252px;position:relative;display:block;height:var(--lt-shot-h);overflow:hidden}
/* min-height is what stops a short capture leaving white space under it. A
   1913x960 screenshot is only ~181px tall at the card's width, so height:auto
   alone left a 71px gap. Below the frame height the image is scaled to fill and
   cropped from the top; above it, height:auto wins and nothing is cropped. */
.lt-work__shot img{width:100%;height:auto;min-height:100%;display:block;object-fit:cover;object-position:top center}
/* Full-page capture: taller than the frame, so hovering walks it down to the
   footer. Scoped to --scroll so a screen-sized capture is not dragged off its
   own bottom edge. A short image now measures exactly one frame tall, which
   makes the transform resolve to zero and simply stand still. */
.lt-work__shot--scroll img{transition:transform 4.2s ease}
.lt-work:hover .lt-work__shot--scroll img{transform:translateY(calc(-100% + var(--lt-shot-h)))}
/* Screen-sized capture: pinned to exactly one frame, never scrolls. */
.lt-work__shot--top img{height:100%}
.lt-work__shot--ph{height:252px;display:grid;place-items:center;background:linear-gradient(160deg,#2f56f0,#141c3a);color:#fff}
.lt-work__shot--ph svg{width:48px;height:48px;opacity:.92}
.lt-work__visit{position:absolute;top:52px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.96);color:var(--lt-primary);font-family:var(--lt-head);font-weight:600;font-size:.76rem;
  padding:.42em .85em;border-radius:999px;box-shadow:var(--lt-shadow-sm);opacity:0;transform:translateY(-6px);transition:.25s var(--lt-ease)}
.lt-work__visit svg{width:15px;height:15px}
.lt-work:hover .lt-work__visit{opacity:1;transform:none}
.lt-work__body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.lt-work__top{display:flex;align-items:center;gap:12px}
.lt-work__titles{display:block}
.lt-work__logo{width:42px;height:42px;border-radius:11px;object-fit:contain;background:#fff;border:1px solid var(--lt-line);padding:5px;flex:none}
.lt-work__tag{display:block;font-size:.7rem;font-family:var(--lt-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lt-primary)}
.lt-work__name{display:block;font-family:var(--lt-head);font-weight:700;font-size:1.16rem;line-height:1.2;color:var(--lt-ink)}
.lt-work__desc{display:block;color:var(--lt-muted);font-size:.94rem}
/* The call to action never breaks. A long client line used to squeeze it until
   "Get in touch" wrapped onto two lines and the arrow was left stranded beside
   them, so the label wraps and the CTA holds its width instead. If the row
   genuinely cannot fit both, the CTA drops to its own line rather than squash. */
.lt-work__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;border-top:1px solid var(--lt-line)}
.lt-work__client{color:var(--lt-muted);font-size:.85rem;min-width:0;flex:1 1 auto}
.lt-work__foot .lt-link{flex:0 0 auto;white-space:nowrap}
.lt-work__foot .lt-link .lt-icon{flex:none}

/* detail-page screenshot frame + swipeable gallery */
.lt-shotframe{border-radius:16px;overflow:hidden;border:1px solid var(--lt-line);box-shadow:var(--lt-shadow);background:#fff}
.lt-shotframe .lt-work__bar{border-radius:16px 16px 0 0}
.lt-shotframe img{width:100%;display:block}
.lt-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px;margin-top:20px}
.lt-gallery img{scroll-snap-align:center;flex:0 0 86%;max-width:86%;border-radius:14px;border:1px solid var(--lt-line);box-shadow:var(--lt-shadow-sm)}
@media(min-width:760px){.lt-gallery img{flex-basis:58%;max-width:58%}}

/* =====================================================================
   CUSTOMERS: scrolling logo strip
   ===================================================================== */
.lt-logos{overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lt-logos__track{display:flex;align-items:center;gap:clamp(38px,6vw,86px);width:max-content;animation:ltMarquee 34s linear infinite}
.lt-logos:hover .lt-logos__track{animation-play-state:paused}
.lt-logo{flex:none;display:grid;place-items:center}
.lt-logo img{height:clamp(28px,4vw,46px);width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.lt-logo:hover img{filter:grayscale(0);opacity:1}
@keyframes ltMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .lt-logos__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .lt-logo[aria-hidden]{display:none}
}

/* floating WhatsApp button */
.lt-wa-float{--lt-wa:#25d366;
  position:fixed;right:20px;bottom:20px;z-index:150;display:inline-flex;align-items:center;gap:10px;
  background:var(--lt-wa);color:#fff;padding:12px 18px;border-radius:999px;font-family:var(--lt-head);font-weight:600;font-size:.95rem;
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--lt-wa) 70%,transparent);transition:transform .25s var(--lt-ease),box-shadow .25s}
.lt-wa-float svg,.lt-wa-float img{width:26px;height:26px;flex:none;object-fit:contain}
.lt-wa-float:hover{transform:translateY(-3px);box-shadow:0 20px 42px -12px color-mix(in srgb,var(--lt-wa) 85%,transparent);color:#fff}
.lt-wa-float span{white-space:nowrap}
@media(max-width:600px){.lt-wa-float{padding:15px;right:16px;bottom:16px}.lt-wa-float span{display:none}}

/* Opposite corner. Overrides the base `right` rather than sitting alongside it. */
.lt-wa-float--left{right:auto;left:20px}
@media(max-width:600px){.lt-wa-float--left{right:auto;left:16px}}
/* No label: a plain circle rather than a pill with dead space. */
.lt-wa-float--bare{padding:15px;gap:0}
/* Device targeting. 600px matches the breakpoint that already hides the label. */
@media(max-width:600px){.lt-wa-float--desktop{display:none}}
@media(min-width:601px){.lt-wa-float--mobile{display:none}}
/* Live chat is on and WhatsApp is set to stay: lift it clear of Tawk.to's
   launcher, which occupies the same bottom-right corner. */
.lt-wa-float--stacked{bottom:104px}
@media(max-width:600px){.lt-wa-float--stacked{bottom:92px}}

/* =====================================================================
   404: built from the shared variables, so every design styles it
   ===================================================================== */
.lt-404{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 var(--lt-pad);
  background:radial-gradient(110% 70% at 50% -10%,var(--lt-bg-2) 0%,var(--lt-bg) 62%)}
.lt-404 .lt-container{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.lt-404__in{max-width:620px}

/* the big 4 0 4, with the zero as a ring that slowly orbits */
.lt-404__code{display:flex;align-items:center;gap:clamp(6px,1.4vw,14px);margin-bottom:14px;
  font-family:var(--lt-head);font-weight:800;line-height:.82;
  font-size:clamp(4.6rem,15vw,10rem);letter-spacing:-.05em;color:var(--lt-ink);opacity:.13}
.lt-404__o{width:.66em;height:.66em;border-radius:50%;flex:none;position:relative;
  border:.13em solid currentColor}
.lt-404__o::after{content:"";position:absolute;top:-.09em;left:50%;width:.16em;height:.16em;
  border-radius:50%;background:var(--lt-primary);transform-origin:50% calc(.33em + .09em);
  animation:lt404orbit 7s linear infinite}
@keyframes lt404orbit{to{transform:rotate(360deg)}}

.lt-404 .lt-h1{font-size:clamp(1.9rem,4vw,3.1rem);margin-bottom:.6rem}
.lt-404 .lt-lede{margin-bottom:26px}

.lt-404__search{display:flex;gap:10px;margin-bottom:22px;max-width:520px}
.lt-404__search input{flex:1;min-width:0;padding:.85em 1.1em;border:1px solid var(--lt-line);
  border-radius:999px;background:var(--lt-bg);color:var(--lt-text);font-family:inherit;font-size:1rem;
  transition:border-color .2s,box-shadow .2s}
.lt-404__search input:focus{outline:none;border-color:var(--lt-primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lt-primary) 15%,transparent)}
.lt-404__search .lt-btn{flex:none}

.lt-404__links{margin-top:34px;padding-top:22px;border-top:1px solid var(--lt-line)}
.lt-404__label{display:block;font-family:var(--lt-head);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lt-muted);margin-bottom:12px}
.lt-404__links ul{display:flex;flex-wrap:wrap;gap:8px}
.lt-404__links a{display:inline-block;padding:.42em .95em;border:1px solid var(--lt-line);
  border-radius:999px;font-size:.9rem;color:var(--lt-text);background:var(--lt-bg);
  transition:color .22s,border-color .22s,transform .22s,background .22s}
.lt-404__links a:hover{color:var(--lt-primary);border-color:var(--lt-primary);transform:translateY(-2px)}

.lt-404__art{display:grid;place-items:center}
.lt-404__art .lt-mascot,.lt-404__art img{max-width:100%}
@media(max-width:900px){
  .lt-404 .lt-container{grid-template-columns:1fr}
  .lt-404__art{display:none}
}
@media(max-width:560px){
  .lt-404__search{flex-direction:column}
  .lt-404__search .lt-btn{justify-content:center}
}

/* =====================================================================
   CUSTOM CURSOR: dot + trailing ring, in every design
   Added by JS only on a fine pointer, so touch devices keep their own
   behaviour and the native cursor is never hidden without a replacement.
   Atelier restyles the ring further in its own file.
   ===================================================================== */
body.lt-cursor-on,
body.lt-cursor-on a,body.lt-cursor-on button,body.lt-cursor-on .lt-btn,
body.lt-cursor-on .lt-faq__q,body.lt-cursor-on summary{cursor:none}
/* Text entry keeps a real caret: a dot is useless for typing. */
body.lt-cursor-on input,body.lt-cursor-on textarea,body.lt-cursor-on select{cursor:auto}
.lt-cursor-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--lt-primary);pointer-events:none;z-index:10000;
  transform:translate(-50%,-50%);transition:opacity .3s}
.lt-cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--lt-primary);opacity:.42;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .28s ease,height .28s ease,border-color .28s,background .28s,opacity .28s}
.lt-cursor-ring.is-hover{width:64px;height:64px;opacity:.95;background:color-mix(in srgb,var(--lt-primary) 8%,transparent)}
@media(prefers-reduced-motion:reduce){.lt-cursor-ring{transition:opacity .2s}}
/* No custom cursor where there is no cursor. */
@media(hover:none),(pointer:coarse){
  .lt-cursor-dot,.lt-cursor-ring{display:none}
  body.lt-cursor-on,body.lt-cursor-on a,body.lt-cursor-on button,body.lt-cursor-on .lt-btn{cursor:auto}
}

/* skip link (accessibility) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--lt-primary);color:#fff;padding:11px 18px;
  border-radius:0 0 12px 0;font-family:var(--lt-head);font-weight:600}
.skip-link:focus{left:0}

/* contact map */
.lt-map{margin-top:24px;border-radius:var(--lt-radius);overflow:hidden;border:1px solid var(--lt-line);box-shadow:var(--lt-shadow-sm);line-height:0}
.lt-map iframe{width:100%;height:340px;border:0;display:block}

/* utility */
/* WordPress core markup (search forms, comment fields, widgets) ships labels
   with this class expecting the theme to hide them visually but keep them for
   screen readers. It was missing, so those labels rendered as stray text. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;
  clip:auto;clip-path:none;white-space:normal}
.lt-center{text-align:center}
.mt-32{margin-top:32px}
.lt-hide{display:none!important}

/* Footer site directory (internal linking for SEO) */
/* Collapsed by default so the directory does not clutter the footer. Native
   <details>, so every link is in the served HTML and crawlable with no JS. */
.lt-footer__dir{
  margin-top:2.5rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.10);
  interpolate-size:allow-keywords;
}
.lt-footer__dir-toggle{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.75;transition:opacity .2s;
}
.lt-footer__dir-toggle::-webkit-details-marker{display:none}
.lt-footer__dir-toggle:hover,.lt-footer__dir[open] .lt-footer__dir-toggle{opacity:1}
.lt-footer__dir-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}
.lt-footer__dir-toggle svg{flex:0 0 auto;transition:transform .3s ease}
.lt-footer__dir[open] .lt-footer__dir-toggle svg{transform:rotate(180deg)}
@supports (interpolate-size:allow-keywords){
  .lt-footer__dir::details-content{
    height:0;overflow:hidden;
    transition:height .35s cubic-bezier(.22,1,.36,1),content-visibility .35s;
    transition-behavior:allow-discrete;
  }
  .lt-footer__dir[open]::details-content{height:auto}
}
@media(prefers-reduced-motion:reduce){
  .lt-footer__dir-toggle svg,.lt-footer__dir::details-content{transition:none}
}
.lt-footer__seo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin-top:1.75rem;
}
.lt-footer__seo h4{margin:0 0 .75rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.lt-footer__seo ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.lt-footer__seo a{font-size:.875rem;opacity:.72;text-decoration:none;transition:opacity .2s}
.lt-footer__seo a:hover,.lt-footer__seo a:focus-visible{opacity:1;text-decoration:underline}
@media(max-width:820px){.lt-footer__seo{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(max-width:520px){.lt-footer__seo{grid-template-columns:1fr}}