/* Luxar Studios — premium cinematic enhancement layer */
:root {
--lx-gold:#d5b36a;
--lx-ink:#071923;
--lx-deep:#0b2c39;
--lx-cream:#f4efe5;
--lx-line:rgba(213, 179, 106, .34);
--lx-ease:cubic-bezier(.2, .7, .2, 1);
}
html {
scroll-behavior:smooth
}
body {
overflow-x:hidden
}
body.lx-cinematic-ready {
background:var(--lx-deep)
}
::selection {
background:var(--lx-gold);
color:#071923
}
/* scroll progress */
.lx-scroll-progress {
position:fixed;
inset:0 0 auto;
z-index:9998;
height:2px;
pointer-events:none;
background:rgba(255, 255, 255, .06)
}
.lx-scroll-progress>span {
display:block;
width:100%;
height:100%;
transform:scaleX(0);
transform-origin:left;
background:linear-gradient(90deg, transparent, var(--lx-gold), #fff, var(--lx-gold));
box-shadow:0 0 18px rgba(213, 179, 106, .75)
}
/* film grain / light / vignette */
.lx-film-grain, .lx-cursor-glow, .lx-camera-flash {
position:fixed;
inset:0;
pointer-events:none
}
.lx-film-grain {
z-index:9992;
opacity:.055;
mix-blend-mode:soft-light;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
animation:lx-grain .28s steps(2) infinite
}
@keyframes lx-grain {
0% {
transform:translate(0, 0)
}
25% {
transform:translate(-1.5%, 1%)
}
50% {
transform:translate(1%, -1%)
}
75% {
transform:translate(.5%, 1.5%)
}
100% {
transform:translate(0, 0)
}
}
.lx-cursor-glow {
z-index:40;
width:420px;
height:420px;
inset:auto;
left:0;
top:0;
border-radius:50%;
transform:translate3d(-50%, -50%, 0);
background:radial-gradient(circle, rgba(213, 179, 106, .11), rgba(70, 153, 205, .045) 36%, transparent 70%);
filter:blur(10px);
opacity:0;
transition:opacity .3s ease
}
body:hover .lx-cursor-glow {
opacity:1
}
.lx-camera-flash {
z-index:9999;
opacity:0;
background:radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 50%), #fff 0, rgba(255, 250, 235, .92) 8%, rgba(213, 179, 106, .34) 27%, transparent 58%)
}
.lx-camera-flash.is-flashing {
animation:lx-flash .38s ease-out
}
@keyframes lx-flash {
0% {
opacity:0
}
12% {
opacity:.95
}
40% {
opacity:.18
}
100% {
opacity:0
}
}

/* custom cursor */
@media (pointer:fine) {
body.lx-cursor-on, body.lx-cursor-on a, body.lx-cursor-on button {
cursor:none
}
.lx-cursor-dot, .lx-cursor-ring {
position:fixed;
left:0;
top:0;
z-index:10000;
pointer-events:none;
border-radius:50%;
transform:translate3d(-50%, -50%, 0)
}
.lx-cursor-dot {
width:5px;
height:5px;
background:var(--lx-gold);
box-shadow:0 0 12px rgba(213, 179, 106, .9)
}
.lx-cursor-ring {
width:34px;
height:34px;
border:1px solid rgba(213, 179, 106, .75);
transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease
}
.lx-cursor-ring.is-active {
width:58px;
height:58px;
background:rgba(213, 179, 106, .08);
border-color:#fff
}
}
/* universal section staging */
body.lx-cinematic-ready section, body.lx-cinematic-ready header, body.lx-cinematic-ready footer {
position:relative;
isolation:isolate
}
.lx-section-scan::before {
content:"";
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
opacity:0;
background:linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .06) 48%, rgba(213, 179, 106, .13) 52%, transparent 64%);
transform:translateX(-70%)
}
.lx-section-scan.is-inview::before {
animation:lx-scan 1.3s var(--lx-ease) .14s both
}
@keyframes lx-scan {
0% {
opacity:0;
transform:translateX(-70%)
}
25% {
opacity:1
}
100% {
opacity:0;
transform:translateX(70%)
}
}
/* reveal system */
.lx-reveal {
opacity:0;
transform:translate3d(0, 46px, 0) scale(.985);
filter:blur(7px);
transition:opacity .9s var(--lx-ease), transform 1.05s var(--lx-ease), filter 1s var(--lx-ease);
transition-delay:var(--lx-delay, 0ms);
will-change:transform, opacity, filter
}
.lx-reveal.lx-from-left {
transform:translate3d(-65px, 0, 0) rotateY(3deg)
}
.lx-reveal.lx-from-right {
transform:translate3d(65px, 0, 0) rotateY(-3deg)
}
.lx-reveal.is-inview {
opacity:1;
transform:none;
filter:none
}
/* image masking / cinematic stills */
.lx-media-frame {
position:relative;
overflow:hidden;
isolation:isolate;
transform:translateZ(0)
}
.lx-media-frame::before {
content:"";
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
background:linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, .10) 45%, rgba(213, 179, 106, .26) 51%, transparent 66%);
transform:translateX(-125%);
transition:transform 1s var(--lx-ease)
}
.lx-media-frame::after {
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -100px 120px -100px rgba(0, 0, 0, .8)
}
.lx-media-frame:hover::before {
transform:translateX(125%)
}
.lx-media-frame img {
transition:transform 1.2s var(--lx-ease), filter .8s ease;
will-change:transform
}
.lx-media-frame:hover img {
transform:scale(1.045);
filter:saturate(1.06) contrast(1.03)
}
.lx-media-frame .lx-focus-corners {
position:absolute;
inset:16px;
z-index:4;
pointer-events:none;
opacity:0;
transition:opacity .35s ease
}
.lx-media-frame:hover .lx-focus-corners {
opacity:1
}
.lx-focus-corners::before, .lx-focus-corners::after {
content:"";
position:absolute;
width:28px;
height:28px;
border-color:var(--lx-gold);
border-style:solid
}
.lx-focus-corners::before {
left:0;
top:0;
border-width:1px 0 0 1px
}
.lx-focus-corners::after {
right:0;
bottom:0;
border-width:0 1px 1px 0
}
/* premium buttons */
.lx-magnetic {
position:relative;
overflow:hidden;
transform:translateZ(0);
transition:transform .24s ease, box-shadow .35s ease!important
}
.lx-magnetic::after {
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 62%);
transform:translateX(-120%);
transition:transform .65s var(--lx-ease)
}
.lx-magnetic:hover::after {
transform:translateX(120%)
}
.lx-magnetic:hover {
box-shadow:0 14px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(213, 179, 106, .22)
}
/* card depth */
.lx-tilt {
transform-style:preserve-3d;
will-change:transform;
transition:transform .25s ease, box-shadow .35s ease
}
.lx-tilt:hover {
box-shadow:0 28px 70px rgba(0, 0, 0, .24)
}
.lx-tilt>* {
transform:translateZ(1px)
}
/* animated headings */
.lx-heading-line {
display:inline-block;
overflow:hidden;
vertical-align:bottom
}
.lx-heading-line>span {
display:inline-block;
transform:translateY(115%);
opacity:0;
transition:transform .95s var(--lx-ease), opacity .8s ease;
transition-delay:var(--lx-delay, 0ms)
}
.is-inview .lx-heading-line>span, .lx-heading-line.is-inview>span {
transform:none;
opacity:1
}
/* photographic HUD */
/*.lx-camera-hud {
position:absolute;
inset:0;
z-index:8;
pointer-events:none;
opacity:.5
}
.lx-camera-hud::before, .lx-camera-hud::after {
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
border:1px solid rgba(255, 255, 255, .22)
}
.lx-camera-hud::before {
width:min(64vw, 730px);
height:min(36vw, 410px)
}
.lx-camera-hud::after {
width:42px;
height:42px;
border-radius:50%;
border-color:rgba(213, 179, 106, .52)
}*/
.lx-hud-meta {
position:absolute;
left:24px;
bottom:22px;
font:500 9px/1.4 Montserrat, sans-serif;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(255, 255, 255, .62)
}
.lx-hud-meta span {
margin-right:14px
}
/* animated light sweep on hero */
.hero-section::after, .heros-intro::after {
content:"";
position:absolute;
inset:-20%;
z-index:3;
pointer-events:none;
background:linear-gradient(105deg, transparent 39%, rgba(120, 200, 255, .07) 46%, rgba(255, 241, 199, .13) 50%, transparent 58%);
animation:lx-hero-light 8.5s ease-in-out infinite;
mix-blend-mode:screen
}
@keyframes lx-hero-light {
0%, 14% {
transform:translateX(-55%) rotate(-4deg);
opacity:0
}
32% {
opacity:1
}
55%, 100% {
transform:translateX(55%) rotate(-4deg);
opacity:0
}
}

/* mobile/performance */
@media (max-width:991.98px) {
.lx-cursor-dot, .lx-cursor-ring, .lx-cursor-glow {
display:none!important
}
body.lx-cursor-on, body.lx-cursor-on a, body.lx-cursor-on button {
cursor:auto
}
.lx-camera-hud::before {
width:76vw;
height:43vw
}
}
@media (max-width:575.98px) {
.lx-film-grain {
opacity:.035
}
.lx-camera-hud {
display:none
}
.lx-reveal, .lx-reveal.lx-from-left, .lx-reveal.lx-from-right {
transform:translate3d(0, 28px, 0)
}
}
@media (prefers-reduced-motion:reduce) {
*, *::before, *::after {
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important
}
.lx-reveal, .lx-heading-line>span {
opacity:1!important;
transform:none!important;
filter:none!important
}
.lx-film-grain, .lx-cursor-dot, .lx-cursor-ring, .lx-cursor-glow {
display:none!important
}
}
/* ============================================================
Layout-preserving UI fixes
These rules intentionally do not add/remove layout sections.
============================================================ */

/* FAQ control: keep the + / − icon in a predictable right-aligned box. */
.faq-accordion .accordion-button {
display:flex;
align-items:center;
gap:18px;
overflow:visible!important;
transform:none!important;
}
.faq-accordion .accordion-button::after {
position:static!important;
inset:auto!important;
flex:0 0 32px;
width:32px!important;
height:32px!important;
margin:0 0 0 auto!important;
padding:0!important;
display:grid!important;
place-items:center;
background:none!important;
box-shadow:none!important;
color:var(--gold)!important;
font-family:'Montserrat', sans-serif!important;
font-size:1.35rem!important;
font-weight:400!important;
line-height:1!important;
letter-spacing:0!important;
transform:none!important;
transition:color .25s ease, transform .25s ease!important;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
transform:rotate(0deg)!important;
}
/* Lightbox controls: sit inside the image frame so they never drift off-screen. */
.image-lightbox {
padding:clamp(14px, 3vw, 36px)!important;
}
.image-lightbox .lightbox-frame {
position:relative!important;
width:min(92vw, 1100px)!important;
height:min(88vh, 850px)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:auto!important;
}
.image-lightbox .lightbox-img {
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
display:block!important;
}
.image-lightbox .lightbox-close, .image-lightbox .lightbox-prev, .image-lightbox .lightbox-next {
position:absolute!important;
z-index:20!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
margin:0!important;
padding:0!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
line-height:1!important;
transform:none!important;
overflow:visible!important;
background:rgba(4, 12, 17, .66)!important;
border:1px solid rgba(255, 255, 255, .28)!important;
color:#fff!important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.image-lightbox .lightbox-close {
top:14px!important;
right:14px!important;
left:auto!important;
bottom:auto!important;
font-size:30px!important;
}
.image-lightbox .lightbox-prev, .image-lightbox .lightbox-next {
top:50%!important;
bottom:auto!important;
font-size:42px!important;
transform:translateY(-50%)!important;
}
.image-lightbox .lightbox-prev {
left:14px!important;
right:auto!important;
}
.image-lightbox .lightbox-next {
right:14px!important;
left:auto!important;
}
.image-lightbox .lightbox-close:hover, .image-lightbox .lightbox-prev:hover, .image-lightbox .lightbox-next:hover {
background:var(--gold, #d5b36a)!important;
color:#071923!important;
border-color:var(--gold, #d5b36a)!important;
}
@media (max-width:575.98px) {
.faq-accordion .accordion-button {
gap:12px;
padding-right:0;
}
.faq-accordion .accordion-button::after {
flex-basis:28px;
width:28px!important;
height:28px!important;
font-size:1.2rem!important;
}
.image-lightbox .lightbox-frame {
width:96vw!important;
height:84vh!important;
}
.image-lightbox .lightbox-close, .image-lightbox .lightbox-prev, .image-lightbox .lightbox-next {
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
}
.image-lightbox .lightbox-close {
top:8px!important;
right:8px!important;
font-size:27px!important;
}
.image-lightbox .lightbox-prev {
left:8px!important;
}
.image-lightbox .lightbox-next {
right:8px!important;
}
.image-lightbox .lightbox-prev, .image-lightbox .lightbox-next {
font-size:36px!important;
}
}
/* Preserve the original "Diverse expertise, one standard of excellence" section layout. */
.selected-work-section .portfolio-column, .selected-work-section .work-card, .selected-work-section .work-image-wrap, .selected-work-section .section-title, .selected-work-section .section-title-small {
filter:none;
}
.selected-work-section .portfolio-column.lx-reveal, .selected-work-section .work-card.lx-reveal, .selected-work-section .section-title.lx-reveal, .selected-work-section .section-title-small.lx-reveal {
opacity:1!important;
transform:none!important;
filter:none!important;
}
.selected-work-section .portfolio-column.lx-tilt, .selected-work-section .work-card.lx-tilt {
transform:none!important;
}
/* =========================================================
LUXAR RESPONSIVE PORTFOLIO HERO SLIDER
========================================================= */
.luxar-portfolio-hero {
--luxar-hero-height: clamp(570px, 25vw, 700px);
--luxar-gold: #d5b36a;
--luxar-light: #ffffff;
--luxar-dark: #080808;
position: relative;
width: 100%;
height: var(--luxar-hero-height);
min-height: 570px;
overflow: hidden;
isolation: isolate;
background: var(--luxar-dark);
}
/* Carousel structure */
.luxar-portfolio-hero .carousel-inner, .luxar-portfolio-hero .carousel-item, .luxar-portfolio-slide {
width: 100%;
height: 100%;
}
.luxar-portfolio-track {
position: absolute;
inset: 0;
z-index: 1;
}
/* Slide */
.luxar-portfolio-slide {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background: #111;
}
/* Image — always fills the slider at every viewport size.
This prevents the empty/black strip that appeared below wide hero images
on desktop and intermediate resolutions. */
.luxar-portfolio-image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.04);
transition:
transform 7s cubic-bezier(0.2, 0.65, 0.3, 1), filter 1.2s ease;
filter: brightness(0.92);
}
/* Slow zoom on active slide */
.luxar-portfolio-hero .carousel-item.active .luxar-portfolio-image {
transform: scale(1);
}

/* Cinematic overlays */
.luxar-portfolio-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.16) 100% );
}
.luxar-portfolio-slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient( 180deg, rgba(0, 0, 0, 0.25) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.54) 100% );
}
/* Bootstrap fade transition */
.luxar-portfolio-hero.carousel-fade .carousel-item {
opacity: 0;
transition: opacity 1.1s ease-in-out;
}
.luxar-portfolio-hero.carousel-fade .carousel-item.active, .luxar-portfolio-hero.carousel-fade .carousel-item-next.carousel-item-start, .luxar-portfolio-hero.carousel-fade .carousel-item-prev.carousel-item-end {
opacity: 1;
}
.luxar-portfolio-hero.carousel-fade .active.carousel-item-start, .luxar-portfolio-hero.carousel-fade .active.carousel-item-end {
opacity: 0;
}
/* =========================================================
OVERLAY CONTENT
========================================================= */

.luxar-portfolio-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
pointer-events: none;
}
.luxar-portfolio-content {
width: min(760px, 70%);
padding: 70px 40px 90px 65px;
color: var(--luxar-light);
pointer-events: auto;
}
.luxar-portfolio-kicker {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.82);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.luxar-portfolio-kicker span {
display: inline-block;
width: 34px;
height: 1px;
flex: 0 0 auto;
background: var(--luxar-gold);
}
.luxar-portfolio-title {
max-width: 760px;
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(42px, 4.8vw, 82px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -2px;
text-wrap: balance;
}
.luxar-portfolio-title strong {
display: block;
color: var(--luxar-gold);
font-style: italic;
font-weight: 400;
}
.luxar-portfolio-description {
max-width: 590px;
margin: 25px 0 0;
color: rgba(255, 255, 255, 0.78);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
.luxar-portfolio-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 54px;
margin-top: 32px;
padding: 14px 27px;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.8px;
text-decoration: none;
text-transform: uppercase;
transition:
color 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.luxar-portfolio-button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.35s ease;
}
.luxar-portfolio-button:hover {
color: #121212;
background: var(--luxar-gold);
border-color: var(--luxar-gold);
transform: translateY(-2px);
}
.luxar-portfolio-button:hover svg {
transform: translateX(4px);
}
/* Content entrance animation */
.luxar-portfolio-kicker, .luxar-portfolio-title, .luxar-portfolio-description, .luxar-portfolio-button {
opacity: 0;
transform: translateY(24px);
animation: luxarContentReveal 0.9s ease forwards;
}
.luxar-portfolio-title {
animation-delay: 0.12s;
}
.luxar-portfolio-description {
animation-delay: 0.24s;
}
.luxar-portfolio-button {
animation-delay: 0.36s;
}
@keyframes luxarContentReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
NAVIGATION ARROWS
========================================================= */

.luxar-slider-navigation {
top: 50%;
bottom: auto;
z-index: 10;
width: 56px;
height: 56px;
margin: 0;
opacity: 1;
transform: translateY(-50%);
}
.luxar-slider-previous {
left: 24px;
}
.luxar-slider-next {
right: 24px;
}
.luxar-slider-arrow {
position: relative;
display: grid;
width: 52px;
height: 52px;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 50%;
color: #ffffff;
background: rgba(6, 6, 6, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
color 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.luxar-slider-arrow svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.luxar-slider-navigation:hover .luxar-slider-arrow {
color: #111111;
background: var(--luxar-gold);
border-color: var(--luxar-gold);
transform: scale(1.06);
}
/* =========================================================
INDICATORS
========================================================= */

.luxar-slider-indicators {
right: auto;
bottom: 35px;
left: 50%;
z-index: 11;
display: flex;
width: auto;
margin: 0;
gap: 8px;
transform: translateX(-50%);
}
.luxar-slider-indicators [data-bs-target] {
position: relative;
width: 42px;
height: 3px;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 20px;
opacity: 1;
background: rgba(255, 255, 255, 0.28);
text-indent: -999px;
transition: width 0.35s ease, background 0.35s ease;
}
.luxar-slider-indicators [data-bs-target]::before {
content: "";
position: absolute;
inset: 0;
width: 0;
border-radius: inherit;
background: var(--luxar-gold);
}
.luxar-slider-indicators .active {
width: 68px;
background: rgba(255, 255, 255, 0.35);
}
.luxar-slider-indicators .active::before {
animation: luxarIndicatorProgress 5s linear forwards;
}
@keyframes luxarIndicatorProgress {
from {
width: 0;
}
to {
width: 100%;
}
}
/* =========================================================
COUNTER
========================================================= */

.luxar-slider-counter {
position: absolute;
right: 42px;
bottom: 34px;
z-index: 11;
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
letter-spacing: 1.6px;
}
.luxar-current-slide {
color: var(--luxar-gold);
font-size: 14px;
}
.luxar-counter-divider {
display: block;
width: 24px;
height: 1px;
background: rgba(255, 255, 255, 0.45);
}
.luxar-total-slides {
color: rgba(255, 255, 255, 0.55);
}
/* =========================================================
SCROLL INDICATOR
========================================================= */

.luxar-slider-scroll {
position: absolute;
bottom: 30px;
left: 38px;
z-index: 11;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
}
.luxar-slider-scroll-line {
position: relative;
display: block;
width: 42px;
height: 1px;
overflow: hidden;
background: rgba(255, 255, 255, 0.34);
}
.luxar-slider-scroll-line::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--luxar-gold);
animation: luxarScrollLine 2.2s ease-in-out infinite;
}
.luxar-slider-scroll-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
}
@keyframes luxarScrollLine {
0% {
left: -100%;
}
50%, 100% {
left: 100%;
}
}

/* =========================================================
LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {
.luxar-portfolio-hero {
--luxar-hero-height: 100%;
}
.luxar-portfolio-content {
padding-left: 90px;
}
.luxar-slider-previous {
left: 35px;
}
.luxar-slider-next {
right: 35px;
}
}

/* =========================================================
LAPTOP
========================================================= */

@media (max-width: 1399.98px) {
.luxar-portfolio-content {
width: min(680px, 72%);
padding-left: 75px;
}
.luxar-portfolio-title {
font-size: clamp(44px, 5.2vw, 68px);
}
.luxar-slider-previous {
left: 16px;
}
.luxar-slider-next {
right: 16px;
}
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991.98px) {
.luxar-portfolio-slide::before {
background:
linear-gradient( 90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 52%, rgba(0, 0, 0, 0.14) 100% );
}
.luxar-portfolio-content {
width: min(640px, 82%);
padding: 60px 55px 90px;
}
.luxar-portfolio-title {
font-size: clamp(40px, 7vw, 62px);
}
.luxar-portfolio-description {
max-width: 520px;
font-size: 15px;
}
.luxar-slider-navigation {
width: 48px;
height: 48px;
}
.luxar-slider-arrow {
width: 44px;
height: 44px;
}
.luxar-slider-previous {
left: 12px;
}
.luxar-slider-next {
right: 12px;
}
.luxar-slider-counter {
right: 25px;
}
.luxar-slider-scroll {
left: 25px;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767.98px) {
.luxar-portfolio-image {
object-position: center center;
}
.luxar-portfolio-slide::before {
background:
linear-gradient( 180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.42) 35%, rgba(0, 0, 0, 0.84) 100% );
}
.luxar-portfolio-overlay {
align-items: flex-end;
}
.luxar-portfolio-content {
width: 100%;
padding: 40px 24px 115px;
text-align: center;
}
.luxar-portfolio-kicker {
justify-content: center;
margin-bottom: 16px;
font-size: 9px;
line-height: 1.6;
letter-spacing: 1.7px;
}
.luxar-portfolio-kicker span {
width: 20px;
}
.luxar-portfolio-title {
max-width: 520px;
margin-inline: auto;
font-size: clamp(37px, 11vw, 52px);
line-height: 1.02;
letter-spacing: -1.4px;
}
.luxar-portfolio-description {
max-width: 470px;
margin: 20px auto 0;
font-size: 14px;
line-height: 1.7;
}
.luxar-portfolio-button {
min-height: 50px;
margin-top: 25px;
padding: 12px 22px;
font-size: 10px;
}
.luxar-slider-navigation {
top: 47%;
width: 42px;
height: 42px;
}
.luxar-slider-arrow {
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.34);
}
.luxar-slider-arrow svg {
width: 18px;
height: 18px;
}
.luxar-slider-previous {
left: 10px;
}
.luxar-slider-next {
right: 10px;
}
.luxar-slider-indicators {
bottom: 30px;
gap: 6px;
}
.luxar-slider-indicators [data-bs-target] {
width: 24px;
height: 2px;
}
.luxar-slider-indicators .active {
width: 42px;
}
.luxar-slider-counter, .luxar-slider-scroll {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.luxar-portfolio-hero {
--luxar-hero-height: clamp(130px, 25vw, 700px);
min-height:130px;
}
.luxar-portfolio-content {
padding: 35px 20px 100px;
}
.luxar-portfolio-kicker {
flex-wrap: wrap;
gap: 7px;
}
.luxar-portfolio-title {
font-size: clamp(34px, 10.5vw, 45px);
}
.luxar-portfolio-description {
font-size: 13px;
}
.luxar-slider-navigation {
top: 43%;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 374.98px) {
.luxar-portfolio-content {
padding-right: 16px;
padding-left: 16px;
}
.luxar-portfolio-title {
font-size: 34px;
}
.luxar-portfolio-description {
display: none;
}
.luxar-portfolio-button {
margin-top: 22px;
}
}
/* =========================================================
LANDSCAPE MOBILE
========================================================= */
@media (max-width: 991.98px) and (orientation: landscape) {
.luxar-portfolio-content {
width: min(620px, 75%);
padding-top: 45px;
padding-bottom: 75px;
}
.luxar-portfolio-title {
font-size: clamp(38px, 6vw, 56px);
}
.luxar-portfolio-description {
margin-top: 15px;
}
.luxar-portfolio-button {
margin-top: 20px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.luxar-slider-navigation:focus-visible .luxar-slider-arrow, .luxar-portfolio-button:focus-visible, .luxar-slider-indicators button:focus-visible, .luxar-slider-scroll:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.luxar-portfolio-image, .luxar-portfolio-button, .luxar-slider-arrow, .luxar-portfolio-hero.carousel-fade .carousel-item {
transition-duration: 0.01ms !important;
}
.luxar-portfolio-kicker, .luxar-portfolio-title, .luxar-portfolio-description, .luxar-portfolio-button, .luxar-slider-scroll-line::after, .luxar-slider-indicators .active::before {
animation: none !important;
}
.luxar-portfolio-kicker, .luxar-portfolio-title, .luxar-portfolio-description, .luxar-portfolio-button {
opacity: 1;
transform: none;
}
}
.cta-section {
position: relative;
overflow: hidden;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.cta-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -3;
}
.cta-video-overlay {
position: absolute;
inset: 0;
background: linear-gradient( 90deg, rgba(4, 20, 29, 0.82) 0%, rgba(4, 20, 29, 0.58) 50%, rgba(4, 20, 29, 0.72) 100% );
z-index: -2;
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 2;
width: 100%;
}
.cta-title, .cta-subtext, .cta-section .mini-line, .cta-section .solid-btn {
position: relative;
z-index: 3;
}
/* Tablet */
@media (max-width: 991px) {
.cta-section {
min-height: 520px;
}
}
/* Mobile */
@media (max-width: 767px) {
.cta-section {
min-height: 460px;
}
.cta-bg-video {
object-position: center center;
}
.cta-video-overlay {
background: rgba(4, 20, 29, 0.68);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.cta-bg-video {
display: none;
}
.cta-section {
background: #0b2f3d;
}
}
.expertise-media {
position: relative;
width: 100%;
height: 100%;
min-height: 480px;
overflow: hidden;
}
.expertise-video-wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.expertise-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}

/* Optional cinematic overlay */
.expertise-video-wrapper::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(  90deg,  rgba(0, 0, 0, 0.08),  rgba(0, 0, 0, 0)  );
}

/* Mobile */
@media (max-width: 991px) {
.expertise-media {
min-height: 420px;
}
}
@media (max-width: 575px) {
.expertise-media {
min-height: 320px;
}
}
/* =========================================
LUXAR STUDIOS - RESPONSIVE VIDEO HERO
========================================= */

.luxar-video-hero {
position: relative;
width: 100%;
overflow: hidden;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
/* Video */
.luxar-hero-video {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
object-position: center;
}

/* Desktop */
@media (min-width: 1200px) {
.luxar-video-hero {
width: 100%;
}
.luxar-hero-video {
width: 100%;
height: auto;
}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.luxar-video-hero {
width: 100%;
}
.luxar-hero-video {
width: 100%;
height: auto;
object-fit: contain;
}
}

/* Mobile */
@media (max-width: 767px) {
.luxar-video-hero {
width: 100%;
min-height: auto;
}
.luxar-hero-video {
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
object-position: center;
}
}

/* Small Mobile */
@media (max-width: 480px) {
.luxar-video-hero {
width: 100%;
}
.luxar-hero-video {
width: 100%;
height: auto;
}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.luxar-hero-video {
animation: none;
}
}