[x-cloak] { display: none !important }

/* the blueprint grid was removed (clean look); the class names are kept so no view needs to change */
.blueprint, .blueprint-light { background-image: none; }

/* Soft glow blobs. A CSS blur() filter on a huge animated element is repainted every frame and makes
   scrolling janky, so the blur is replaced by a radial mask (same look, no filter) on its own GPU layer. */
[data-blob] {
  filter: none !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  will-change: transform;
}

.no-scrollbar { scrollbar-width: none }
.no-scrollbar::-webkit-scrollbar { display: none }


/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-stopped { overflow: hidden }

/* Page curtain: if JS/GSAP fails to load, hide it by itself after a few seconds */
#page-curtain { animation: curtainFailsafe .01s 12s forwards }
@keyframes curtainFailsafe { to { opacity: 0; visibility: hidden } }

/* Image zoom on card hover */
.img-zoom img { transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
.group:hover .img-zoom img { transform: scale(1.07) }

/* Gradient text helper */
.text-gradient {
  background-image: linear-gradient(90deg, rgb(var(--brand-400)), rgb(var(--brand-600)));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Card shine that follows the cursor (set by app.js) */
.shine { position: relative; overflow: hidden }
.shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--brand-600) / .10), transparent 60%);
}
.shine:hover::after { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}

/* Service marquee: pure CSS so it always runs (no JS/GSAP dependency). marquee.js only adds scroll-speed boost. */
@keyframes marquee-right { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes marquee-left  { from { transform: translateX(0) }    to { transform: translateX(-50%) } }
[data-marquee] { animation: marquee-right 28s linear infinite; will-change: transform }
[data-marquee="left"] { animation-name: marquee-left }
@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation-duration: 80s }   /* still moves, just very slowly */
}

/* ------------------------------------------------------------------
   Theme. Colours come from CSS variables that Admin -> Theme writes into the page (see App\Support\Theme):
   --bg, --surface, --text, --brand-*.  The values below are only fallbacks.
   html.dark switches to the dark set. The page is built from a handful of "light surface" utilities, so the
   dark theme re-maps exactly those instead of sprinkling dark: variants over every element.
   The intentionally dark sections (process, testimonials, footer, red bands) are left alone.
   ------------------------------------------------------------------ */
:root { --bg: 255 255 255; --surface: 255 255 255; --text: 28 28 31 }
html.dark { color-scheme: dark; --bg: 13 13 16; --surface: 23 23 27; --text: 236 236 240 }
body { background-color: rgb(var(--bg)); color: rgb(var(--text)) }

/* surfaces */
.bg-white { background-color: rgb(var(--surface)) }
.bg-white\/95 { background-color: rgb(var(--bg) / .95) }
.dark .bg-gray-50 { background-color: #101013 }
.dark .bg-gray-100 { background-color: #1c1c21 }
.dark .bg-gray-200 { background-color: #25252b }
.dark .bg-gray-300 { background-color: #3a3a42 }
.dark .bg-brand-50 { background-color: rgba(255, 255, 255, .06) }
.dark .bg-brand-100\/70 { background-color: rgba(255, 255, 255, .05) }

/* things that must stay white in both themes */
.bg-white\/90,
.bg-white.text-brand-700,
footer .bg-white,
#page-curtain .bg-white { background-color: #fff; color: #1c1c1f }

/* text */
.text-ink-800 { color: rgb(var(--text)) }
.dark .text-gray-500 { color: #9d9da8 }
.dark .text-gray-600 { color: #b4b4bf }
.dark .text-gray-700 { color: #cacad3 }

/* lines */
.dark .border-gray-50,
.dark .border-gray-100,
.dark .border-gray-200 { border-color: rgba(255, 255, 255, .09) }
.dark .border-gray-300 { border-color: rgba(255, 255, 255, .18) }
.dark .border-brand-100 { border-color: rgba(255, 255, 255, .14) }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, .09) }
.dark .ring-gray-100,
.dark .ring-gray-200 { --tw-ring-color: rgba(255, 255, 255, .1) }

/* form fields, light grid, header logo (black text needs a light plate) */
.dark input, .dark textarea, .dark select { background-color: #1c1c21; color: rgb(var(--text)) }
.dark #site-header img { background: #fff; border-radius: .5rem; padding: 2px 6px }

/* Preloader / language-switch overlay: frosted glass (transparent + blur, like the header) with the logo in the middle */
.preloader {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.dark .preloader { background: rgba(13, 13, 16, .6) }
.preloader-bar { width: 9rem; height: 3px; border-radius: 9999px; background: rgba(28, 28, 31, .12); overflow: hidden }
.dark .preloader-bar { background: rgba(255, 255, 255, .18) }
.preloader-bar::after { content: ''; display: block; height: 100%; width: 40%; border-radius: inherit; background: rgb(var(--brand-600)); animation: preloaderBar 1.1s ease-in-out infinite }
@keyframes preloaderBar { from { transform: translateX(-100%) } to { transform: translateX(250%) } }
.preloader [data-curtain-logo] > div:first-child { box-shadow: 0 18px 50px rgba(0, 0, 0, .18); border: 1px solid rgba(28, 28, 31, .06) }

/* The same look as pure CSS, so it is on screen before any script runs:
   html.lang-out  = fading in just before the page reloads, html.lang-in = covering the freshly loaded page, then fading away */
html.lang-out::before, html.lang-in::before {
  content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
html.dark.lang-out::before, html.dark.lang-in::before { background: rgba(13, 13, 16, .6) }
html.lang-out::after, html.lang-in::after {
  content: ''; position: fixed; z-index: 2147483001; left: 50%; top: 50%; width: 200px; height: 130px; margin: -65px 0 0 -100px;
  box-sizing: border-box; padding: 20px; border-radius: 1rem; pointer-events: none;
  background: #fff url(../img/logo.png) center / contain no-repeat; background-origin: content-box;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18); border: 1px solid rgba(28, 28, 31, .06);
}
html.lang-out::before, html.lang-out::after { opacity: 0; animation: ovIn .25s ease forwards }
html.lang-in::before, html.lang-in::after { animation: ovOut .5s ease .55s forwards }
@keyframes ovIn { to { opacity: 1 } }
@keyframes ovOut { to { opacity: 0; visibility: hidden } }

/* Theme switch: smooth colour change (only colour properties, so GSAP-driven transforms are untouched) */
html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.lang-out::before, html.lang-out::after, html.lang-in::before, html.lang-in::after { display: none }
  .preloader-bar::after { animation: none; width: 100% }
}

/* Insight article body (HTML written in the admin) */
.article-body { color: inherit; line-height: 2 }
.article-body > * + * { margin-top: 1.25rem }
.article-body h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; line-height: 1.5 }
.article-body h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem }
.article-body p { color: rgb(var(--text) / .85) }
.article-body ul, .article-body ol { padding-left: 1.4rem; display: grid; gap: .5rem; color: rgb(var(--text) / .85) }
.article-body ul { list-style: disc }
.article-body ol { list-style: decimal }
.article-body li::marker { color: rgb(var(--brand-600)) }
.article-body a { color: rgb(var(--brand-600)); text-decoration: underline }
.article-body img { max-width: 100%; height: auto; border-radius: 1rem }
.article-body blockquote { border-left: 4px solid rgb(var(--brand-600)); padding-left: 1rem; font-style: italic }


/* ===== Hero v2: engineering decoration ===== */
#home.hero-v2 { background-image: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%); }
.dark #home.hero-v2 { background-image: linear-gradient(180deg, #0c0c0e 0%, #151518 100%); }
.dark .hero-v2 .from-brand-500\/25 { --tw-gradient-from: rgba(255, 255, 255, .07); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .hero-eng { color: #ffffff; }
.dark .hero-eng { opacity: .35; }
.eng-dim rect { fill: rgb(var(--bg)); }
.hero-eng { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #6b6e76; opacity: .6; }
.hero-eng > svg, .hero-eng > i { position: absolute; display: block; }
.eng-gear { opacity: .22; }
.eng-gear-a { width: 380px; top: -90px; right: -80px; animation: eng-spin 26s linear infinite, eng-breathe 5s ease-in-out infinite; }
.eng-gear-b { width: 230px; bottom: -60px; left: -50px; opacity: .2; animation: eng-spin 16s linear infinite reverse, eng-breathe 5s ease-in-out -2s infinite; }
.eng-gear-c { width: 150px; top: 46%; right: 30%; opacity: .16; animation: eng-spin 12s linear infinite reverse, eng-breathe 4s ease-in-out -1s infinite; }
.eng-compass { width: 120px; top: 20%; left: 3%; opacity: .28; animation: eng-spin 40s linear infinite; }
.eng-cube { width: 64px; opacity: .5; animation: eng-wander 11s ease-in-out infinite; }
.eng-cube-a { top: 10%; left: 44%; }
.eng-cube-b { bottom: 14%; right: 6%; width: 48px; animation-duration: 15s; animation-direction: reverse; animation-delay: -5s; }
.eng-plus { width: 16px; height: 16px; opacity: .35; animation: eng-pulse 6s ease-in-out infinite; }
.eng-plus::before, .eng-plus::after { content: ""; position: absolute; background: currentColor; }
.eng-plus::before { left: 7px; top: 0; width: 2px; height: 16px; }
.eng-plus::after { top: 7px; left: 0; height: 2px; width: 16px; }
@keyframes eng-spin { to { transform: rotate(360deg); } }
@keyframes eng-breathe { 0%, 100% { opacity: .16; } 50% { opacity: .3; } }
@keyframes eng-wander { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(26px, -22px) rotate(90deg); } 50% { transform: translate(0, -40px) rotate(180deg); } 75% { transform: translate(-26px, -18px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes eng-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(8deg); } }
@keyframes eng-draw { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
@keyframes eng-pulse { 0%, 100% { opacity: .15; transform: scale(.85); } 50% { opacity: .6; transform: scale(1.15); } }
@media (max-width: 640px) { .eng-gear-a { width: 240px; } .eng-compass, .eng-dim, .eng-cube-a { display: none; } }
/* only when the admin option "Follow the visitor's reduce motion setting" is ON (app.js adds the class) */
html.reduce-motion .hero-eng * { animation: none !important; }

/* hero v2 picture box: 4:3 (recommended upload 1200 x 900) */
.hero-frame { aspect-ratio: 4 / 3; }

/* ===== Hero v2: clean, logo-inspired (red block, white slashes, black tower) ===== */
#home.hero-v2::before, #home.hero-v2::after { content: ""; position: absolute; top: 0; bottom: 0; background: rgb(var(--text) / .035); transform: skewX(-24deg); pointer-events: none; }
#home.hero-v2::before { right: 9%; width: 13%; }
#home.hero-v2::after { right: 25%; width: 4%; }
.hv2-wrap { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; padding: 3.5rem 1rem 5rem; }
@media (min-width: 640px) { .hv2-wrap { padding-left: 4rem; padding-right: 4rem; } }
.hv2-stage { display: grid; }
.hv2-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; visibility: hidden; pointer-events: none; }
.hv2-slide.is-leaving { visibility: visible; z-index: 5; }
.hv2-slide.is-on { visibility: visible; pointer-events: auto; z-index: 10; }
@media (max-width: 1023px) { .hv2-slide { grid-template-columns: 1fr; gap: 3rem; } }

.hv2-copy > * { opacity: 0; transform: translateY(28px); }
.hv2-slide.is-leaving .hv2-copy > * { opacity: 0; transform: translateY(-20px); transition: opacity .3s ease, transform .4s cubic-bezier(.4, 0, 1, 1); }
.hv2-slide.is-on .hv2-copy > * { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.hv2-slide.is-on .hv2-copy > :nth-child(1) { transition-delay: .35s; }
.hv2-slide.is-on .hv2-copy > :nth-child(2) { transition-delay: .45s; }
.hv2-slide.is-on .hv2-copy > :nth-child(3) { transition-delay: .57s; }
.hv2-slide.is-on .hv2-copy > :nth-child(4) { transition-delay: .69s; }

.hv2-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font: 600 .78rem/1 "DM Mono", ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--brand-600)); }
.hv2-dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgb(var(--brand-600)); box-shadow: 0 0 0 4px rgb(var(--brand-600) / .18); animation: eng-pulse 2.4s ease-in-out infinite; }
.hv2-title { margin: 1.4rem 0 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; font-size: clamp(2.2rem, 4.6vw, 4rem); color: rgb(var(--text)); }
.hv2-title > span { display: block; }
.hv2-title-accent { color: rgb(var(--brand-600)); }
.hv2-title-accent::after { content: ""; display: block; width: 4.5rem; height: .32rem; margin-top: 1rem; border-radius: 2px; background: currentColor; }
.hv2-text { margin: 1.6rem 0 0; max-width: 32rem; font-size: 1.1rem; line-height: 1.75; color: #5b5d63; }
.dark .hv2-text { color: #a3a5ad; }
.hv2-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hv2-btn { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.7rem; border-radius: .5rem; font-weight: 700; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.hv2-btn-primary { background: rgb(var(--brand-600)); color: #fff; box-shadow: 0 14px 28px rgb(var(--brand-600) / .28); }
.hv2-btn-primary span:last-child { transition: transform .2s ease; }
.hv2-btn-primary:hover { background: rgb(var(--brand-700)); transform: translateY(-2px); }
.hv2-btn-primary:hover span:last-child { transform: translateX(4px); }
.hv2-btn-ghost { border: 1.5px solid rgb(var(--text) / .22); color: rgb(var(--text)); }
.hv2-btn-ghost:hover { border-color: rgb(var(--brand-600)); color: rgb(var(--brand-600)); }

/* picture: white frame + red block with white slashes behind it + a small black tower (the logo) */
.hv2-visual-wrap { position: relative; perspective: 1100px; padding: 3.9rem 3.5rem 2.6rem 0; opacity: 0; transform: translateX(56px); }
.hv2-slide.is-leaving .hv2-visual-wrap { opacity: 0; transform: translateX(-40px); transition: opacity .4s ease, transform .5s cubic-bezier(.4, 0, 1, 1); }
.hv2-slide.is-on .hv2-visual-wrap { opacity: 1; transform: none; transition: opacity .9s ease .3s, transform 1.1s cubic-bezier(.16, 1, .3, 1) .3s; }
.hv2-panel { position: absolute; z-index: 0; top: 18%; right: 0; bottom: 0; width: 62%; overflow: hidden; border-radius: 4px; background: rgb(var(--brand-600));
  transform: translateX(46px); opacity: 0; }
.hv2-slide.is-on .hv2-panel { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .6s, opacity .8s ease .6s; }
.hv2-panel i { position: absolute; top: -10%; bottom: -10%; background: #fff; transform: skewX(-24deg); }
.hv2-panel i:nth-child(1) { right: 6%; width: 7%; }
.hv2-panel i:nth-child(2) { right: 15%; width: 3%; opacity: .6; }
.hv2-tower { position: absolute; z-index: 1; top: 1.1rem; left: 1.5rem; width: 2.6rem; height: 4.8rem; border-radius: 2px 2px 0 0; background: #0e0e10; animation: eng-float 7s ease-in-out infinite; }
.hv2-tower::before { content: ""; position: absolute; top: .75rem; left: 50%; width: 1.05rem; height: 1.05rem; transform: translateX(-50%);
  background: linear-gradient(#0e0e10, #0e0e10) center / 2px 100% no-repeat, linear-gradient(#0e0e10, #0e0e10) center / 100% 2px no-repeat, #fff; }
.hv2-roof { position: absolute; z-index: 1; top: 0; left: calc((100% - 3.5rem) * .025); width: calc((100% - 3.5rem) * .95); height: 5.4rem; background: rgb(var(--brand-600)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dark .hv2-tower { filter: drop-shadow(0 0 .5px rgba(255, 255, 255, .8)) drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
.hv2-visual { position: relative; z-index: 2; padding: .6rem; border-radius: 6px; background: #fff; box-shadow: 0 34px 64px rgba(14, 14, 16, .24);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s ease-out; }
.dark .hv2-visual { background: #1b1b1f; box-shadow: 0 34px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.hv2-img { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: #0e0e10; }
.hv2-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); }
.hv2-slide.is-leaving .hv2-img img { transform: scale(1); }
.hv2-slide.is-on .hv2-img img { transform: scale(1); transition: transform 2.2s cubic-bezier(.16, 1, .3, 1) .3s; }
.hv2-img img.is-contain { object-fit: contain; padding: .75rem; }
.hv2-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 14, 16, .5) 0%, transparent 24%, transparent 66%, rgba(14, 14, 16, .55) 100%); }
.hv2-topline { position: absolute; z-index: 2; top: .85rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; gap: 1rem;
  font: 500 .65rem/1 "DM Mono", ui-monospace, Consolas, monospace; letter-spacing: .14em; color: rgba(255, 255, 255, .92); }
.hv2-chip { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .75rem; padding: .6rem 1.1rem .6rem .65rem; border-radius: .5rem; background: #fff; color: #0e0e10; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.dark .hv2-chip { background: #1b1b1f; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1); }
.hv2-chip-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .4rem; background: rgb(var(--brand-600) / .12); font-size: 1.1rem; }
.hv2-chip-title { margin: 0; font-size: .85rem; font-weight: 700; }
.hv2-chip-sub { margin: 0; font-size: .72rem; color: rgb(var(--brand-600)); }

.hv2-controls { display: flex; align-items: center; gap: .5rem; margin-top: 2.5rem; }
.hv2-bar-btn { display: flex; align-items: center; padding: .75rem 0; }
.hv2-bar { position: relative; display: block; width: 1.8rem; height: .28rem; border-radius: 999px; overflow: hidden; background: rgb(var(--text) / .14); transition: width .5s ease; }
.hv2-bar.is-on { width: 4rem; }
.hv2-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: rgb(var(--brand-600)); }

html.reduce-motion .hv2-visual { transform: none !important; }
html.reduce-motion .hv2-slide * { transition-duration: .01s !important; transition-delay: 0s !important; }
html.reduce-motion .hv2-tower { animation: none; }

/* Preloader: a house draws itself (roof, walls), its body fills white and the full logo appears inside it */
.preloader-home { position: relative; width: min(21rem, 82vw); aspect-ratio: 300 / 260; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .18)); }
.preloader-home svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-p { fill: none; stroke: #111113; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ph-draw 1.8s cubic-bezier(.4, 0, .2, 1) forwards; }
.dark .ph-p { stroke: #fff; }
.ph-p.ph-roof { stroke: rgb(var(--brand-600)); stroke-width: 9; }
.ph-p.ph-wall { animation-delay: .9s; }
.ph-p.ph-ground { animation-delay: 1.5s; stroke-width: 5; }
.ph-roof-fill { fill: rgb(var(--brand-600) / .12); opacity: 0; animation: ph-in .9s ease 1.9s forwards; }
.ph-body { fill: #fff; opacity: 0; animation: ph-in .9s ease 2.2s forwards; }
.ph-logo { position: absolute; left: 15%; top: 45%; width: 70%; opacity: 0; transform: translateY(8px) scale(.96); animation: ph-logo 1.2s cubic-bezier(.16, 1, .3, 1) 2.6s forwards; }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
@keyframes ph-in { to { opacity: 1; } }
@keyframes ph-logo { to { opacity: 1; transform: none; } }
html.reduce-motion .ph-p, html.reduce-motion .ph-roof-fill, html.reduce-motion .ph-body, html.reduce-motion .ph-logo { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }

/* dark mode: brand text on dark surfaces uses the lighter brand shade so it stays readable */
.dark .text-brand-700 { color: rgb(var(--brand-400)); }

/* ===== Section polish: animated icons, soft decoration, livelier cards (prefix sx-) ===== */
.sx-rel { position: relative; }
.sx-sec { position: relative; overflow: hidden; }
.sx-sec > * { position: relative; z-index: 1; }
/* slanted bands: only on some sections (.sx-band-r right, .sx-band-l left) so the page does not repeat itself */
.sx-band-r::before, .sx-band-r::after, .sx-band-l::before, .sx-band-l::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; background: rgb(var(--brand-600) / .05); transform: skewX(-24deg); pointer-events: none; }
.sx-band-r::before { right: 6%; width: 9%; }
.sx-band-r::after { right: 19%; width: 2.5%; }
.sx-band-l::before { left: 6%; width: 9%; }
.sx-band-l::after { left: 19%; width: 2.5%; }
.sx-sec--dark.sx-band-r::before, .sx-sec--dark.sx-band-r::after, .sx-sec--dark.sx-band-l::before, .sx-sec--dark.sx-band-l::after { background: rgba(255, 255, 255, .04); }

/* primary-red sections (rhythm: light / red / light / black …) */
.sx-sec--red { color: #fff; background-color: rgb(var(--brand-600)); background-image: linear-gradient(135deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-700)) 100%); }
.sx-sec--red .text-gray-600 { color: rgba(255, 255, 255, .88); }
.sx-sec--red .bg-white { color: rgb(var(--text)); }
.sx-sec--red .bg-white .text-gray-600 { color: #5b5d63; }
.dark .sx-sec--red .bg-white .text-gray-600 { color: #a3a5ad; }
.sx-sec--red .sx-eyebrow, .dark .sx-sec--red .sx-eyebrow { color: #fff; }
.sx-sec--red .sx-ico, .dark .sx-sec--red .sx-ico { color: #fff; background: rgba(255, 255, 255, .2); }
.sx-sec--red .sx-ico::after { border-color: rgba(255, 255, 255, .6); }
.sx-sec--red h2::after { background: #fff !important; }
.sx-sec--red button.bg-brand-600 { background: #fff; color: rgb(var(--brand-600)); }
.sx-sec--red button.bg-brand-600:hover { background: #111113; color: #fff; }
.sx-sec--red a.border-gray-300 { border-color: rgba(255, 255, 255, .65); color: #fff; }
.sx-sec--red a.border-gray-300:hover { background: #fff; border-color: #fff; color: rgb(var(--brand-600)); }
.sx-gear > div::before { content: ""; position: absolute; z-index: 0; left: -150px; bottom: -150px; width: 420px; height: 420px; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23fff'%3E%3Ccircle cx='100' cy='100' r='86' stroke-width='16' stroke-dasharray='11.25 11.25'/%3E%3Ccircle cx='100' cy='100' r='76' stroke-width='8'/%3E%3Ccircle cx='100' cy='100' r='26' stroke-width='6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: eng-spin 60s linear infinite; }

/* eyebrow: icon badge + label */
.sx-eyebrow { display: inline-flex; align-items: center; gap: .75rem; margin: 0; font-weight: 700; letter-spacing: .02em; color: rgb(var(--brand-600)); }
.dark .sx-eyebrow { color: rgb(var(--brand-400)); }
.sx-eyebrow--dark { color: rgb(var(--brand-400)); }
.sx-eyebrow--center { display: flex; justify-content: center; }
.sx-ico { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: .8rem; color: rgb(var(--brand-600)); background: rgb(var(--brand-600) / .1); }
.dark .sx-ico, .sx-eyebrow--dark .sx-ico { color: rgb(var(--brand-400)); background: rgb(var(--brand-600) / .18); }
.sx-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgb(var(--brand-600) / .5); animation: sx-ring 2.6s ease-out infinite; pointer-events: none; }
.sx-ico svg { width: 1.45rem; height: 1.45rem; overflow: visible; }
.sx-ico--light { width: 3rem; height: 3rem; color: #fff; background: rgba(255, 255, 255, .2); }
.dark .sx-ico--light { color: #fff; background: rgba(255, 255, 255, .2); }
.sx-ico--light::after { border-color: rgba(255, 255, 255, .55); }
.sx-ico--light svg { width: 1.5rem; height: 1.5rem; }
#about h2, #services h2, #portfolio h2, #activities h2, #process h2, #testimonials h2, #insights h2 { position: relative; padding-bottom: 1.1rem; }
#about h2::after, #services h2::after, #portfolio h2::after, #activities h2::after, #process h2::after, #testimonials h2::after, #insights h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: .3rem; border-radius: 2px; background: rgb(var(--brand-600)); animation: sx-bar 3.2s ease-in-out infinite; }

/* icon animations */
.sxa-spin { animation: eng-spin 9s linear infinite; transform-origin: 50% 50%; }
.sxa-bob { animation: sx-bob 3.2s ease-in-out infinite; }
.sxa-bounce { animation: sx-bounce 1.8s ease-in-out infinite; }
.sxa-tilt { animation: sx-tilt 3.6s ease-in-out infinite; transform-origin: 50% 50%; }
.sxa-shake { animation: sx-shake 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
.sxa-flash { animation: sx-flash 3s ease-in-out infinite; }
.sxa-glow { animation: sx-glow 2.4s ease-in-out infinite; }
.sxa-blink .w { animation: sx-blink 2.2s steps(2, jump-none) infinite; }
.sxa-draw .d { stroke-dasharray: 20; animation: sx-drawloop 2.8s ease-in-out infinite; }
@keyframes sx-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sx-bar { 0%, 100% { width: 3.5rem; } 50% { width: 5.5rem; } }
@keyframes sx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sx-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(0); } 75% { transform: translateY(-1.5px); } }
@keyframes sx-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes sx-shake { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-14deg); } 70% { transform: rotate(12deg); } 78% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } }
@keyframes sx-flash { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.14); } }
@keyframes sx-glow { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .55; filter: drop-shadow(0 0 4px rgb(var(--brand-600))); } }
@keyframes sx-blink { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes sx-drawloop { 0% { stroke-dashoffset: 20; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20; } }

/* services */
.sx-card { overflow: hidden; }
.sx-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: rgb(var(--brand-600)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.sx-card:hover::before { transform: scaleX(1); }
.sx-card-ico { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1rem; color: rgb(var(--brand-600)); background: rgb(var(--brand-600) / .1); transition: background-color .3s, color .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.sx-card-ico svg { width: 1.8rem; height: 1.8rem; }
.sx-card-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgb(var(--brand-600) / .4); animation: sx-ring 3s ease-out infinite; }
.group:hover .sx-card-ico { color: #fff; background: rgb(var(--brand-600)); transform: rotate(-6deg) scale(1.1); }
.dark .sx-card-ico { color: rgb(var(--brand-400)); }
.dark .group:hover .sx-card-ico { color: #fff; }

/* portfolio */
.sx-go { position: absolute; z-index: 2; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: rgb(var(--brand-600));
  transform: translateY(-6px) scale(.9); opacity: 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s, background-color .3s, color .3s; }
.sx-go svg { width: 1.25rem; height: 1.25rem; }
.group:hover .sx-go { transform: none; opacity: 1; }
.sx-go:hover { background: rgb(var(--brand-600)); color: #fff; }

/* process */
.sx-step { display: flex; align-items: center; justify-content: space-between; }
.sx-step-ico { position: relative; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: rgb(var(--brand-400)); background: rgb(var(--brand-600) / .18); }
.sx-step-ico svg { width: 1.6rem; height: 1.6rem; animation: sx-bob 3.2s ease-in-out infinite; }
.sx-step-ico::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px dashed rgb(var(--brand-400) / .55); animation: eng-spin 14s linear infinite; }
.sx-step-n { font: 800 2.6rem/1 Poppins, "Hind Siliguri", sans-serif; color: rgba(255, 255, 255, .12); }

/* why us */
.sx-check { position: relative; }
.sx-check::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--brand-600) / .6); animation: sx-ring 2.4s ease-out infinite; }
.sx-badge { position: absolute; z-index: 3; left: 1.2rem; bottom: 1.2rem; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; color: #fff; background: rgb(var(--brand-600)); box-shadow: 0 14px 30px rgb(var(--brand-600) / .4); }
.sx-badge i { position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgb(var(--brand-600) / .75); animation: eng-spin 12s linear infinite; }
.sx-badge svg { width: 2.1rem; height: 2.1rem; }

html.reduce-motion .sx-sec *, html.reduce-motion .sx-sec *::before, html.reduce-motion .sx-sec *::after, html.reduce-motion .sx-ico::after { animation: none !important; }

/* works section: 2 columns (col-6) x 2 rows = 4 projects, 4:3 images, original card typography; 1 column on phones */
.sx-works { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.sx-works > a { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) { .sx-works > a { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1024px) { .sx-works { gap: 1.5rem; } .sx-works > a { flex-basis: calc((100% - 1.5rem) / 2); } }
.sx-works-img { aspect-ratio: 4 / 3; }
/* black sections: secondary text + links */
.sx-sec--dark .text-gray-600 { color: #b4b6bd; }
.sx-sec--dark a.text-brand-600 { color: rgb(var(--brand-400)); }
.sx-sec--dark .sx-eyebrow--dark { color: rgb(var(--brand-400)); }
/* the red "process" section */
.sx-sec--red .text-gray-400 { color: rgba(255, 255, 255, .86); }
.sx-sec--red .border-white\/10 { border-color: rgba(255, 255, 255, .28); }
.sx-sec--red .bg-white\/5 { background-color: rgba(255, 255, 255, .1); }
.sx-sec--red .bg-white\/10 { background-color: rgba(255, 255, 255, .3); }
.sx-sec--red [data-progress] { background: #fff; }
.sx-sec--red .sx-step-ico { color: #fff; background: rgba(255, 255, 255, .18); }
.sx-sec--red .sx-step-ico::before { border-color: rgba(255, 255, 255, .7); }
.sx-sec--red .sx-step-n { color: rgba(255, 255, 255, .28); }

/* hero bottom: the two classic drawing animations (dimension line at the left, skyline along the bottom) */
.eng-dim { width: 260px; bottom: 26px; left: 5%; opacity: .6; stroke-dasharray: 600; animation: eng-draw 6s ease-in-out infinite alternate; }
.eng-skyline { left: calc(5% + 290px); bottom: 0; width: calc(95% - 290px); height: 120px; opacity: .2; stroke-dasharray: 3000; animation: eng-draw 9s ease-in-out infinite alternate; }
/* the skyline starts after the measurement line, so the two never overlap (the line is hidden on phones, then it uses the full width) */
@media (max-width: 640px) { .eng-skyline { left: 0; width: 100%; } }
/* intro video: full screen, directly under the hero (no gap); GSAP scales it OUT to a rounded card on scroll */
.sx-fullvideo { --fhalf: calc(50svh - var(--hdr-h, 5rem) / 2); height: calc(100vh - var(--hdr-h, 5rem)); height: calc(100svh - var(--hdr-h, 5rem)); min-height: 420px; padding: 0; }
.sx-fullvideo-wrap { width: 100%; height: 100%; padding: 0; }
.sx-fullvideo .sx-video-frame { width: 100%; height: 100%; }

/* intro video: plain one-line texts around the video once it has scaled out (no icons, no sub-heading, no lines) */
/* one type scale for all four texts; positions are measured from the shrunken video (--vs, set in app.js) so they hug it */
.sx-around { --ar-size: clamp(1.4rem, 2.4vw, 2.1rem); position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sx-around [data-around] { opacity: 0; }
.sx-around-t.sx-around-stat { font-weight: 800; }
.sx-around-stat.sx-around-t { left: 0; right: 0; bottom: calc(50% + var(--fhalf) * var(--vs, .26) + 1.2rem); width: auto; justify-content: center; padding: 0 1rem; white-space: normal; text-align: center; }
.sx-around-stat { position: absolute; display: flex; align-items: baseline; gap: .55rem; margin: 0; width: max-content; white-space: nowrap; font-size: var(--ar-size); line-height: 1.3; color: rgb(var(--text)); }
.sx-around-stat strong { font-weight: 800; color: rgb(var(--brand-600)); }
.sx-around-label { font-weight: 700; color: rgb(var(--text)); }
.sx-around-l { top: 50%; margin-top: -.65em; right: calc(50% + 50vw * var(--vs, .26) + 1.6rem); }
.sx-around-r { top: 50%; margin-top: -.65em; left: calc(50% + 50vw * var(--vs, .26) + 1.6rem); }
.sx-around-b { top: calc(50% + var(--fhalf) * var(--vs, .26) + 1.4rem); left: 0; right: 0; width: auto; justify-content: center; }   /* centred without a CSS transform: GSAP owns the transform */
@media (max-width: 767px) {
  .sx-around { --ar-size: 1.05rem; }
  .sx-around-l, .sx-around-r, .sx-around-b { top: calc(50% + var(--fhalf) * var(--vs, .4) + 1rem); margin-top: 0; width: 30%; flex-direction: column; align-items: center; gap: .15rem; white-space: normal; text-align: center; }
  .sx-around-l { left: 2%; right: auto; } .sx-around-r { left: auto; right: 2%; } .sx-around-b { left: 35%; right: auto; }
  .sx-around-stat strong { font-size: 1.5rem; }
  .sx-around-label { font-size: .72rem; }
}
html.reduce-motion .sx-around { display: none; }  /* no GSAP scale-out there, so the stats would sit on top of the full-screen video */

/* services: 4 columns on desktop (8 services = 2 even rows), 2 on tablet, 1 on phone; an incomplete last row is centred */
.sx-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.sx-services > article { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) { .sx-services > article { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1024px) { .sx-services > article { flex-basis: calc((100% - 3.75rem) / 4); } }

/* full-screen Google map above the footer */
.sx-map { position: relative; height: clamp(22rem, 50vh, 32rem); background: #e5e7eb; overflow: hidden; }
.sx-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.sx-map.is-active iframe { pointer-events: auto; }
.sx-map-lock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding-bottom: 2.5rem; background: transparent; cursor: pointer; }
.sx-map-lock span { padding: .7rem 1.4rem; border-radius: 999px; background: rgba(14, 14, 16, .78); color: #fff; font-weight: 600; font-size: .9rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s; }
.sx-map-lock:hover span { background: rgb(var(--brand-600)); }
.sx-map.is-active .sx-map-lock { display: none; }

/* ===== Our Work: header dropdown (Completed / Running), tabs, status chip, progress ===== */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-chev { transition: transform .25s ease; }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-panel { position: absolute; z-index: 60; top: 100%; left: 50%; min-width: 17rem; margin-top: .9rem; padding: .5rem; border-radius: 14px; background: rgb(var(--surface)); border: 1px solid rgb(var(--text) / .08);
  box-shadow: 0 24px 50px rgba(14, 14, 16, .18); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }   /* hover bridge, so the panel does not close on the gap */
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-dd-item { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: 10px; transition: background-color .2s; }
#site-header#site-header .nav-dd-panel a.nav-dd-item { color: rgb(var(--text)) !important; }
.nav-dd-item:hover { background: rgb(var(--brand-600) / .1); }
.nav-dd-txt { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.nav-dd-txt b { font-size: .95rem; font-weight: 700; }
.nav-dd-txt small { font-size: .75rem; opacity: .6; }
.nav-dd-go { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; color: rgb(var(--brand-600)); font-weight: 700; }
.nav-dd-item:hover .nav-dd-go { opacity: 1; transform: none; }
.nav-dd-ico { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .8rem; transition: transform .25s ease; }
.nav-dd-ico svg { width: 1.3rem; height: 1.3rem; }
.nav-dd-ico.completed { color: #1f9d63; background: rgba(34, 160, 107, .14); }
.nav-dd-ico.running { color: rgb(var(--brand-600)); background: rgb(var(--brand-600) / .12); }
.nav-dd-ico.running svg { animation: sx-bob 2.4s ease-in-out infinite; }
.nav-dd-item:hover .nav-dd-ico { transform: scale(1.08) rotate(-4deg); }
.nav-dd-ico.is-sm { width: 1.6rem; height: 1.6rem; border-radius: .5rem; }
.nav-dd-ico.is-sm svg { width: 1rem; height: 1rem; }
.dark .nav-dd-ico.completed { color: #4ade9a; background: rgba(74, 222, 154, .14); }
.dark .nav-dd-ico.running { color: rgb(var(--brand-400)); }

.sx-worktabs { display: flex; flex-wrap: wrap; gap: .7rem; }
.sx-worktabs > button, .sx-worktabs > a { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid rgb(var(--text) / .18); font-weight: 700; transition: background-color .25s, color .25s, border-color .25s; }
.sx-worktabs > button:hover, .sx-worktabs > a:hover { border-color: rgb(var(--brand-600)); }
.sx-worktabs > .is-on { background: rgb(var(--brand-600)); border-color: rgb(var(--brand-600)); color: #fff; }
.sx-worktabs em { font-style: normal; font-size: .75rem; min-width: 1.5rem; padding: .15rem .45rem; border-radius: 999px; background: rgb(var(--text) / .1); text-align: center; }
.sx-worktabs > .is-on em { background: rgba(255, 255, 255, .25); }
.sx-sec--dark .sx-worktabs > button { color: #fff; border-color: rgba(255, 255, 255, .28); }
.sx-sec--dark .sx-worktabs > button.is-on { border-color: rgb(var(--brand-600)); }
.sx-sec--dark .sx-worktabs em { background: rgba(255, 255, 255, .15); }
.sx-worktabs-dot { width: .6rem; height: .6rem; border-radius: 50%; background: rgb(var(--brand-600)); }
.sx-worktabs-dot.running { animation: eng-pulse 1.8s ease-in-out infinite; }
.sx-worktabs-dot.completed { background: #22a06b; }
.sx-worktabs-dot.all { background: #8b8f97; }
.sx-worktabs > .is-on .sx-worktabs-dot { background: #fff; }
.sx-worktabs--page { margin-top: 2rem; }
.sx-works-empty { margin: 2rem 0 0; padding: 2rem; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .3); text-align: center; color: rgba(255, 255, 255, .8); }
.sx-works-empty--light { margin: 2rem 0 0; border-color: rgb(var(--text) / .2); color: #5b5d63; }

.sx-run-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sx-run-chip i { width: .5rem; height: .5rem; border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .3); animation: eng-pulse 1.6s ease-in-out infinite; }
.sx-run-chip--solid { margin-left: .5rem; margin-top: 1.25rem; vertical-align: top; background: rgb(var(--brand-600) / .12); color: rgb(var(--brand-600)); }
.sx-prog { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; font-size: .78rem; font-weight: 700; color: #fff; }
.sx-prog > div { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.sx-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb020, #ff7a3d); }
.sx-prog--page { max-width: 22rem; color: rgb(var(--text)); }
.sx-prog--page > div { background: rgb(var(--text) / .12); }

/* Turbo Drive: the thin progress bar shown while a page is being fetched */
.turbo-progress-bar { height: 3px; background: rgb(var(--brand-600)); box-shadow: 0 0 8px rgb(var(--brand-600) / .6); }

/* ===== smooth page changes (Turbo Drive): dim while leaving, shimmer skeleton on slow loads, fade the new page in ===== */
main, footer { transition: opacity .38s ease; }
body.is-entering main, body.is-entering footer { opacity: 0; transition: none; }
html.reduce-motion body.is-entering main, html.reduce-motion body.is-entering footer { opacity: 1; }

#page-skeleton { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: rgb(var(--bg)); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
#page-skeleton.is-on { opacity: 1; }
#page-skeleton.no-fade { transition: none; }
.sk-wrap { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1rem 2rem; }
@media (min-width: 640px) { .sk-wrap { padding-left: 4rem; padding-right: 4rem; } }
.sk-row { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .sk-row { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.sk { border-radius: 12px; background: linear-gradient(90deg, rgb(var(--text) / .07) 25%, rgb(var(--text) / .15) 37%, rgb(var(--text) / .07) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }
.sk-pill { width: 9rem; height: 1.7rem; border-radius: 999px; }
.sk-h1 { width: 88%; height: 3.6rem; margin-top: 1.3rem; }
.sk-h1--short { width: 58%; }
.sk-line { width: 72%; height: 1.05rem; margin-top: 1.4rem; }
.sk-line--short { width: 46%; margin-top: .7rem; }
.sk-btns { display: flex; gap: .8rem; margin-top: 2rem; }
.sk-btn { width: 10rem; height: 3.1rem; border-radius: .5rem; }
.sk-btn--ghost { width: 8rem; opacity: .7; }
.sk-media { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; }
.sk-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 768px) { .sk-cards { grid-template-columns: repeat(3, 1fr); } }
.sk-card { height: 12rem; border-radius: 16px; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
html.reduce-motion .sk { animation: none; }

/* skeleton: fake top bar + header so the screen is never white at the top */
.sk-top { width: 100%; }
.sk-strip { height: 36px; background: rgb(var(--text) / .08); }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 80px; max-width: 80rem; margin: 0 auto; padding: 0 1rem; border-bottom: 1px solid rgb(var(--text) / .06); }
.sk-logo { width: 7.5rem; height: 3.2rem; border-radius: .5rem; }
.sk-nav { display: none; gap: 1.6rem; }
@media (min-width: 1024px) { .sk-nav { display: flex; } }
.sk-nav i { display: block; width: 3.6rem; height: .9rem; border-radius: 999px; }
.sk-cta { width: 8.5rem; height: 2.7rem; border-radius: 999px; }

/* ===== responsive polish ===== */
/* laptops / small tablets in landscape (1024-1279px): the 8-item menu + call-to-action must fit on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
  #site-header nav { gap: .85rem !important; font-size: 13px !important; }
  #site-header nav a { white-space: nowrap; }
  #site-header .max-w-7xl { padding-left: .75rem; padding-right: .75rem; }
  #site-header a[data-magnetic] { padding: .55rem .95rem !important; font-size: .8rem !important; white-space: nowrap; }
  #site-header img { height: 3.2rem; }
}
/* phones: the floating Messenger / WhatsApp / call buttons must not cover the footer's last lines */
@media (max-width: 767px) { footer { padding-bottom: 5.5rem; } }

/* ===== phones: hero picture first, text below; the intro video is a real 16:9 box (not the full screen height) ===== */
@media (max-width: 767px) {
  .hv2-slide { gap: 1.6rem; }
  .hv2-visual-wrap { order: -1; }              /* slider picture on top, the content underneath */
  .hv2-wrap { padding-top: 2.2rem; }
  /* the prev / next arrows belong to the picture now, not to the middle of the whole hero (that is the text on phones) */
  #home.hero-v2 > button { top: 14.2rem !important; }
  .sx-fullvideo { --fhalf: 28.125vw; height: calc(56.25vw + 14rem); min-height: 0; }
  .sx-fullvideo-wrap { position: absolute; left: 0; right: 0; top: 50%; height: 56.25vw; margin-top: -28.125vw; }
}

/* intro video: until the poster has arrived the frame shimmers (same look as the page skeleton) and the play button waits;
   then the poster fades in. Never a black box with a play icon. */
.sx-video-frame { background: linear-gradient(90deg, #d9dade 25%, #ebebee 37%, #d9dade 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }
.dark .sx-video-frame { background: linear-gradient(90deg, #1b1b20 25%, #2a2a31 37%, #1b1b20 63%); background-size: 400% 100%; }
.sx-video-frame.is-ready { animation: none; background: #0b0b0d; }
.sx-video-frame .sx-poster { opacity: 0; transition: opacity .55s ease; }
.sx-video-frame.is-ready .sx-poster { opacity: 1; }
.sx-video-frame .sx-play { opacity: 0; transition: opacity .4s ease .15s; }
.sx-video-frame.is-ready .sx-play { opacity: 1; }
.sx-video-frame > .absolute.bg-ink-950\/30 { opacity: 0; transition: opacity .55s ease; }
.sx-video-frame.is-ready > .absolute.bg-ink-950\/30 { opacity: 1; }
html.reduce-motion .sx-video-frame { animation: none; }