:root {
--bg:            #0d2b3a;
--bg-dark:       #082634;
--bg-hero-left:  #061f31;
--bg-hero-mid:   #0a3147;
--bg-hero-right: #041d2f;
--panel:         #0d3748;
--panel-soft:    #103f52;
--gold:          #d4ad4d;
--gold-soft:     #e0bc60;
--white-soft:    #f5edd8;
--text:          rgba(245, 237, 216, 0.92);
--muted:         rgba(245, 237, 216, 0.92);
--line:          rgba(255, 255, 255, 0.12);
--line-soft:     rgba(255, 255, 255, 0.08);
--shadow-gold:   0 18px 50px rgba(212, 173, 77, 0.18);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
background: var(--bg);
color: var(--white-soft);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 70%;
  }
}
/* ---- Shared typography ---- */
.section-label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.6rem, 5vw, 5.2rem);
line-height: 1.08;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--white-soft);
margin: 0;
}
.section-title .accent {
color: var(--gold-soft);
font-style: italic;
}
.mini-line {
width: 62px;
height: 1px;
background: var(--gold);
margin: 18px auto;
}
/* ---- Reveal animation ---- */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.8s ease, transform 0.8s ease;
will-change: transform, opacity;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
HERO
============================================================ */
.hero-section {
min-height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(90deg, var(--bg-hero-left) 0%, var(--bg-hero-mid) 50%, var(--bg-hero-right) 100%);
}
.hero-section::before {
content: "";
position: absolute;
inset: 0;
/*background:
radial-gradient(circle at center, rgba(25, 83, 118, 0.28), transparent 44%),  radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 60%);*/
pointer-events: none;
transform: scale(1.15);
animation: heroPulse 10s ease-in-out infinite alternate;
}
@keyframes heroPulse {
from {
transform: scale(1.08);
opacity: 0.88;
}
to {
transform: scale(1.18);
opacity: 1;
}
}
/* ---- Navbar ---- */
.custom-navbar {
padding: 28px 0;
position: relative;
z-index: 10;
}
.brand-name {
font-family: 'Cormorant Garamond', serif;
color: var(--gold-soft);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 1.2rem;
font-weight: 500;
white-space: nowrap;
transition: color 0.3s ease;
width:18%;
}
.brand-name:hover {
color: var(--gold-soft);
}
.navbar-nav .nav-link {
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
position: relative;
transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: 1rem;
bottom: 0.25rem;
width: calc(100% - 2rem);
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
}
.navbar-nav .nav-link:hover {
color: var(--gold-soft);
}
.navbar-nav .nav-link:hover::after {
transform: scaleX(1);
}
/* Quote button in navbar — small outlined */
.nav-quote-btn {
min-width: auto !important;
padding: 9px 18px !important;
font-size: 0.72rem !important;
letter-spacing: 0.2em !important;
border: 1px solid rgba(212, 173, 77, 0.6) !important;
color: var(--gold-soft) !important;
background: transparent !important;
border-radius: 0 !important;
transition: 0.3s ease !important;
}
.nav-quote-btn:hover {
background: var(--gold-soft) !important;
color: #0b2233 !important;
}
/* ---- Buttons (shared) ---- */
.outline-btn, .solid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
padding: 15px 28px;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.8rem;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
transition: 0.35s ease;
cursor: pointer;
}
.solid-btn {
border: 1px solid var(--gold-soft);
background: var(--gold-soft);
color: #0b2233;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.solid-btn:hover {
background: transparent;
color: var(--gold-soft);
box-shadow: var(--shadow-gold);
transform: translateY(-2px);
}
.outline-btn {
border: 1px solid rgba(212, 173, 77, 0.7);
color: var(--gold-soft);
background: transparent;
}
.outline-btn:hover {
background: var(--gold-soft);
color: #0b2233;
box-shadow: var(--shadow-gold);
transform: translateY(-2px);
}
/* Hero "View Portfolio" button uses muted border */
.hero-outline-btn {
border-color: rgba(255, 255, 255, 0.18) !important;
color: var(--text) !important;
}
.hero-outline-btn:hover {
border-color: var(--gold-soft) !important;
background: transparent !important;
color: var(--gold-soft) !important;
box-shadow: none !important;
}
/* ---- Hero content ---- */
.hero-content {
position: relative;
z-index: 2;
min-height: calc(65vh - 100px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 0 60px;
}
.eyebrow {
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.32em;
font-size: 0.72rem;
margin-bottom: 1.6rem;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 7.5vw, 7rem);
line-height: 0.8;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--white-soft);
margin-bottom: 0.4rem;
}
.hero-title .accent {
display: block;
color: var(--gold-soft);
font-weight: 400;
font-style: italic;
margin-top: 0.25rem;
}
.hero-text {
max-width: 800px;
margin: 0 auto;
color: var(--muted);
font-size: 1.1rem;
line-height: 1.5;
font-weight: 300;
}
.hero-buttons {
margin-top: 2.4rem;
gap: 1rem;
}
/* ============================================================
SHOWCASE
============================================================ */
.showcase-hero {
position: relative;
min-height: 650px;
display: flex;
align-items: flex-end;
padding: 80px 0 44px;
overflow: hidden;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid rgba(212, 173, 77, 0.35);
/* --- FIX: correct background-size syntax --- */
background-image: url(../images/hero-feature.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;           /* was: background:cover — invalid */
}
.showcase-hero::before {
content: "";
position: absolute;
inset: 0;
/*background: rgba(6, 28, 42, 0.72);*/
}
.showcase-hero::after {
content: "";
position: absolute;
inset: 0;
/*background: linear-gradient(rgb(16,46,59) 0%, transparent 20%, transparent 76%, rgb(16,46,59) 100%);*/
}
.showcase-overlay {
position: relative;
z-index: 2;
width: 100%;
}
.showcase-kicker {
color: var(--gold-soft);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.72rem;
margin-bottom: 12px;
}
.showcase-sub {
display: flex;
justify-content: center;
gap: 48px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.24em;
}
/* ---- Marquee ---- */
.category-marquee {
border-bottom: 1px solid rgba(212, 173, 77, 0.35);
border-top: 1px solid rgba(212, 173, 77, 0.35);
overflow: hidden;
white-space: nowrap;
padding: 16px 0 14px;
}
.category-track {
display: inline-block;
min-width: 200%;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.78rem;
animation: ticker 45s linear infinite;
}
/* ---- Stats ---- */
.showcase-stats {
padding: 40px 0 40px;
border-bottom: 1px solid var(--line);
}
.stat-block {
padding: 0 0 0 0em;
}
.gap {
border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.stat-number {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.8rem, 4vw, 4.4rem);
line-height: 1;
color: var(--gold-soft);
margin-bottom: 12px;
}
.stat-label {
color: var(--white-soft);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.82rem;
margin-bottom: 6px;
}
.stat-text {
color: var(--muted);
font-size: 0.88rem;
}
/* ============================================================
EXPERTISE
============================================================ */
.expertise-section {
padding: 40px 0 40px;
background: var(--bg);
}
.expertise-title {
max-width: 760px;
margin-bottom: 40px;
}
.expertise-grid {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.expertise-item {
min-height: 100%;
}
.expertise-media {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
overflow: hidden;
min-height: 100%;
}
.expertise-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.expertise-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 58px 40px;
border-left: 1px solid var(--line);
min-height: 100%;
}
.expertise-index {
color: var(--gold);
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: 24px;
}
.expertise-heading {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.16;
font-weight: 300;
margin-bottom: 24px;
color: var(--white-soft);
}
.expertise-text {
color: var(--text);
font-size: 1rem;
line-height: 1.7;
max-width: 540px;
margin-bottom: 28px;
}
.tag-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-chip {
width: 32%;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 13px;
border: 1px solid rgba(212, 173, 77, 0.45);
color: var(--gold-soft);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.64rem;
background: transparent;
font-family: 'Montserrat', sans-serif;
}
.tag-chip1 {
width: 48%;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 13px;
border: 1px solid rgba(212, 173, 77, 0.45);
color: var(--gold-soft);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.64rem;
background: transparent;
font-family: 'Montserrat', sans-serif;
}
/* ---- Expertise mini row (04) ---- */
.expertise-bottom {
padding: 20px;
}
.expertise-mini-row {
border-bottom: 1px solid var(--line);
padding-top: 34px;
padding-bottom: 40px;
}
.expertise-mini-index {
color: var(--gold);
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: 14px;
padding-top: 6px;
}
.expertise-mini-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 2vw, 2.2rem);
line-height: 1.1;
margin-bottom: 0;
font-weight: 300;
color: var(--white-soft);
}
.expertise-mini-text {
color: var(--text);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 24px;
max-width: 560px;
}
/* ============================================================
SELECTED WORK
============================================================ */
.selected-work-section {
padding: 50px 0 40px;
background: #183847;
}
.section-top {
margin-bottom: 0;
}
.gallery-link-wrap {
text-align: right;
align-self: flex-end;
padding-bottom: 4px;
}
.gallery-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.75rem;
transition: 0.3s ease;
}
.gallery-link:hover {
color: var(--gold-soft);
}
.portfolio-grid {
row-gap: 28px;
}
.work-card {
display: block;
text-decoration: none;
color: inherit;
}
.work-image-wrap {
overflow: hidden;
background: #102b36;
}
.work-image {
width: 100%;
aspect-ratio: 4 / 5.25;
object-fit: cover;
display: block;
transition: transform 0.55s ease;
}
.work-card:hover .work-image {
transform: scale(1.04);
}
.work-meta {
padding-top: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
align-items: center;
justify-content: space-between;
gap: 12px;
}
.work-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
line-height: 1.2;
color: var(--white-soft);
margin: 0;
font-weight: 400;
text-align: center;
}
.work-number {
color: var(--gold);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
}
.section-packages {
min-height:920px;
padding:50px 0 65px;
background: #183847;
border-top:1px solid rgba(255, 255, 255, .08);
}
.eyebrow {
color:var(--gold);
font-size:12px;
letter-spacing:.42em;
font-weight:700;
text-transform:uppercase;
margin-bottom:15px;
}
.main-title {
font-family:'Cormorant Garamond', serif;
font-size:56px;
line-height:1;
font-weight:400;
margin-bottom:36px;
color:#fff9ec;
}
.main-title em {
color:var(--gold);
font-style:italic;
font-weight:400;
}
.intro {
max-width:900px;
margin:auto;
color:rgba(245, 237, 216, 0.92);
line-height:1.85;
font-size:16px;
}
.note {
color:#91a4a8;
font-size:16px;
margin-top:8px;
}
.note a {
color:var(--gold);
text-decoration:underline;
}
.small-divider {
width:58px;
height:1px;
background:var(--gold);
opacity:.55;
margin:32px auto 32px;
}
.extra {
padding:45px 0 0 0;
}
.pricing-card {
min-height:700px;
background:linear-gradient(180deg, rgba(12, 42, 56, .95), rgba(8, 32, 43, .98));
border:1px solid rgba(255, 255, 255, .08);
border-top:1px solid var(--line);
padding:48px 36px 34px;
box-shadow:0 25px 55px rgba(0, 0, 0, .22);
position:relative;
}
.pricing-card.featured {
border:2px solid var(--gold);
border-bottom: 1px solid var(--gold);
border-left: 1px solid var(--gold);
border-right: 1px solid var(--gold);
background:linear-gradient(180deg, #0e3342, #0b2b39);
min-height: auto !important;
height: 100% !important;
padding: 38px 26px 34px !important;
overflow: visible !important;
display: grid;
flex-direction: column;
}
.badge-lux {
position:absolute;
top:36px;
left:36px;
background:var(--gold);
color:#0a2430;
font-size:10px;
font-weight:800;
letter-spacing:.28em;
padding:7px 13px;
text-transform:uppercase;
}
.badge-outline {
position:absolute;
top:36px;
left:36px;
border:1px solid var(--gold);
color:var(--gold);
font-size:8px;
font-weight:800;
letter-spacing:.28em;
padding:7px 13px;
text-transform:uppercase;
}
.card-label {
color:var(--gold);
font-size:9px;
letter-spacing:.35em;
font-weight:700;
text-transform:uppercase;
margin-bottom:8px;
}
.pricing-card.has-badge .card-label {
margin-top:42px;
}
.package-name {
font-family:'Cormorant Garamond', serif;
font-size:36px;
color:#fff7e9;
margin-bottom:15px;
font-weight:400;
}
.starting {
color:#7f969c;
font-size:10px;
letter-spacing:.32em;
text-transform:uppercase;
font-weight:700;
margin-bottom:8px;
}
.price {
font-family:'Inter', sans-serif;
color:var(--gold);
font-size:38px;
line-height:1;
margin-bottom:24px;
font-weight:700;
}
.price span {
font-family:'Inter', sans-serif;
color:#d9e0dc;
font-size:15px;
margin-left:8px;
}
.card-line {
height:1px;
background:rgba(255, 255, 255, .08);
margin-bottom:24px;
}
.features {
list-style:none;
padding:0;
margin:0 0 31px;
}
.features li {
color: rgba(245, 237, 216, 0.92);
font-size:13px;
margin-bottom:17px;
line-height:1.35;
display:flex;
gap:12px;
}
.features li::before {
content:"✓";
color:var(--gold);
font-size:11px;
margin-top:1px;
}
.btn-gold {
width:100%;
border:0;
background:var(--gold);
color:#0b2530;
padding:17px 20px;
font-size:14px;
letter-spacing:.12em;
font-weight:800;
text-transform:uppercase;
transition:.25s;
}
.btn-gold a {
color:#0b2530;
text-decoration:none;
}
.btn-gold:hover {
background:#f3cc62;
color:#0b2530;
transform:translateY(-1px);
}
@media(max-width:991px) {
.section-packages {
padding:40px 0 70px;
}
.main-title {
font-size:44px;
}
.pricing-card {
margin-bottom:24px;
}
}
/* ============================================================
PROCESS
============================================================ */
.how-section {
padding-top: 40px;
}
.step {
min-height: 100%;
padding: 34px 32px 30px;
border-left: 1px solid var(--line);
transition: background 0.35s ease, transform 0.35s ease;
}
.step:hover {
background: rgba(255, 255, 255, 0.025);
transform: translateY(-4px);
}
.step-number {
font-family:'Inter', sans-serif;
font-size: 2rem;
line-height: 1.2;
color: rgba(212, 173, 77, 0.32);
margin-bottom: 0;
}
.step-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
margin-bottom: 12px;
font-weight: 600;
color: var(--white-soft);
}
.step-text {
font-size: 0.95rem;
line-height: 1.5;
color: var(--text);
max-width: 280px;
}
/* ---- Quote block ---- */
.quote-block {
margin-top: 40px;
padding: 20px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: center;
background:#183847;
}
.quote-text {
max-width: 1100px;
margin: 0 auto;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 2.5vw, 2.5rem);
line-height: 1.1;
font-style: italic;
font-weight: 300;
letter-spacing: -0.01em;
color: var(--white-soft);
}
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials-section {
padding: 40px 0 0;
background: radial-gradient(circle at top, #0d2b3a, #0d2b3a);
color: #fff;
overflow: hidden;
}
.section-label {
display: inline-block;
margin-bottom: 35px;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: #f5edd8!important;
}
.testimonial-slider {
position: relative;
overflow: hidden;
padding: 10px;
}
.testimonial-track {
display: flex;
gap: 24px;
transition: transform 0.6s ease;
}
.testimonial-card {
min-width: calc(50.333% - 16px);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
border-right: 1px solid var(--line);
height: 100%;
padding: 42px 20px 0 0;
}
.stars {
color: #d4ad4d;
font-size: 18px;
margin-bottom: 20px;
letter-spacing: 3px;
}
.testimonial-card p {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 34px;
color: #f5edd8;
}
.author-rule {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin-bottom: 18px;
}
.testimonial-card h4 {
font-size: 16px;
margin: 0 0 0px;
color: #f5edd8;
}
.testimonial-card span {
font-size: 13px;
color: #f5edd8;
}
.testimonial-dots {
text-align: center;
margin-top: 28px;
}
.testimonial-dots button {
width: 10px;
height: 10px;
border: 0;
border-radius: 50%;
margin: 0 6px;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
}
.testimonial-dots button.active {
background: #d4ad4d;
transform: scale(1.3);
}
@media (max-width: 991px) {
.testimonial-card {
min-width: calc(50% - 12px);
}
}
@media (max-width: 575px) {
.testimonials-section {
padding-top: 60px;
}
.testimonial-card {
min-width: 100%;
padding: 26px;
}
.testimonial-card p {
font-size: 15px;
}
}
/* ---- Ticker bar ---- */
.ticker-bar {
border-bottom: 1px solid rgba(212, 173, 77, 0.35);
border-top: 1px solid rgba(212, 173, 77, 0.35);
overflow: hidden;
white-space: nowrap;
padding: 16px 0 14px;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.78rem;
}
.ticker-track {
display: inline-block;
min-width: 200%;
animation: ticker 45s linear infinite;
}
@keyframes ticker {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ============================================================
FAQ SECTION
============================================================ */
.faq-section {
padding: 70px 0 70px;
background: linear-gradient(180deg, #0d2b3a 0%, #0b2a38 55%, #183847 100%);
border-top: 1px solid var(--line);
}
.faq-header {
max-width: 900px;
margin: 0 auto 95px;
}
.faq-header p, .faq-bottom p {
max-width: 700px;
margin: 0 auto;
color: var(--text);
font-size: 1rem;
line-height: 1.8;
padding-top:0em;
}
.faq-wrap {
max-width: 880px;
margin: 0 auto
}
}
aq-category {
display: flex;
align-items: center;
gap: 18px;
color: var(--gold);
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
}
.faq-category::after {
content: "";
height: 1px;
flex: 1;
background: rgba(212, 173, 77, 0.35);
}
.faq-accordion .accordion-item {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
.faq-accordion .accordion-button {
background: transparent;
color: var(--white-soft);
padding: 14px 0;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 400;
box-shadow: none;
}
.faq-accordion .accordion-button::after {
content: "+";
background-image: none;
color: var(--gold);
font-family: 'Montserrat', sans-serif;
font-size: 1.3rem;
transform: none;
width: auto;
height: auto;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
content: "−";
}
.faq-accordion .accordion-button:not(.collapsed) {
color: var(--gold-soft);
background: transparent;
box-shadow: none;
}
.faq-accordion .accordion-body {
padding: 0 0 22px;
color: var(--text);
font-size: 0.78rem;
line-height: 1.8;
max-width: 680px;
}
.faq-bottom {
margin-top: 70px;
}
.faq-bottom .solid-btn {
margin-top: 32px;
}
@media (max-width: 767.98px) {
.faq-section {
padding: 85px 0 80px;
}
.faq-header {
margin-bottom: 60px;
}
.faq-wrap {
max-width: 100%;
}
.faq-accordion .accordion-button {
font-size: 1rem;
padding: 18px 0;
}
.faq-bottom {
margin-top: 85px;
}
}
/* ============================================================
CTA
============================================================ */
.cta-section {
padding: 0 0 50px 0;
text-align: center;
background:
radial-gradient(circle at center, rgba(25, 80, 110, 0.46) 0%, transparent 58%), var(--bg);
border-top: 1px solid rgba(255, 255, 255, 0.04);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: "";
position: absolute;
inset: -10%;
background: #183847;
pointer-events: none;
}
.cta-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.6rem, 5vw, 5rem);
line-height: 1.18;
font-weight: 300;
margin-bottom: 18px;
position: relative;
z-index: 1;
color: var(--white-soft);
}
.cta-title .accent {
display: inline-block;
color: var(--gold-soft);
font-style: italic;
}
.cta-subtext {
color: var(--text);
font-size: 1rem;
margin-bottom: 2.4rem;
position: relative;
z-index: 1;
}
.cta-section .solid-btn {
position: relative;
z-index: 1;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg-dark);
padding: 40px 0 25px;
border-top: 1px solid var(--line);
}
.footer-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 10px;
width:45%;
}
.footer-title {
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.72rem;
margin-bottom: 22px;
}
.footer-text, .footer-links a, .footer-contact {
color: var(--text);
font-size: 0.85rem;
line-height: 1.9;
}
.footer-links a {
display: block;
margin-bottom: 6px;
transition: color 0.3s ease, transform 0.3s ease;
}
.footer-links a:hover {
color: var(--gold-soft);
transform: translateX(4px);
}
.footer-contact a:link {
color: var(--text);
}
.footer-contact a:hover {
color: #fff;
}
.footer-bottom {
margin-top: 44px;
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-copy a {
color: var(--muted);
}
.footer-copy a:hover {
color: #f4d48a;
}
.footer-social {
display: flex;
gap: 26px;
flex-wrap: wrap;
}
.footer-social a {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: color 0.3s ease, transform 0.3s ease;
}
.footer-social a:hover {
color: var(--gold-soft);
transform: translateX(4px);
}
.mt {
margin-top:0;
}
/* ============================================================
NAVBAR TOGGLER
============================================================ */
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.18);
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
filter: invert(1);
}

/* ============================================================
RESPONSIVE — tablet (≤991px)
============================================================ */
@media (max-width: 991.98px) {
.custom-navbar .navbar-collapse {
margin-top: 1rem;
padding: 1rem;
background: rgba(3, 20, 33, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-content {
min-height: auto;
padding-top: 70px;
}
.gallery-link-wrap {
text-align: left !important;
margin-top: 24px;
}
.showcase-hero {
min-height: 460px;
}
.expertise-copy {
border-left: 0;
border-top: 1px solid var(--line);
padding: 42px 26px 40px;
}
.step {
border-left: none;
border-top: 1px solid var(--line);
padding-left: 0;
padding-right: 0;
}
.step-text {
max-width: none;
}
.testimonial-card {
border-right: 0;
}
.mt {
margin-top:2em;
}
}

/* ============================================================
RESPONSIVE — mobile (≤767px)
============================================================ */
@media (max-width: 767.98px) {
.mt {
margin-top:2em;
}
.brand-name {
font-size: 1rem;
letter-spacing: 0.2em;
width:50%;
}
.cta-section {
padding: 30px 0;
}
.eyebrow, .section-label, .footer-title {
letter-spacing: 0.22em;
}
.hero-text, .cta-subtext, .footer-text, .footer-links a, .footer-contact, .step-text, .expertise-text, .expertise-mini-text {
font-size: 0.92rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.outline-btn, .solid-btn {
width: 100%;
min-width: auto;
}
.showcase-sub {
flex-direction: column;
gap: 8px;
}
.showcase-hero {
min-height: 380px;
}
.showcase-stats {
padding: 28px 0 44px;
}
.tag-chip {
width: 100%;
}
.expertise-section {
padding: 40px 0 15px;
}
.expertise-title {
margin-bottom: 40px;
}
.expertise-media img {
min-height: 235px;
}
.quote-block {
padding: 30px 0;
}
.testimonial-card {
padding: 32px 0;
border-right: 0;
}
.testimonial-text {
font-size: 1.15rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.footer-social {
gap: 16px;
}
.selected-work-section {
padding: 40px 0 30px;
}
.section-label {
font-size: 0.72rem;
letter-spacing: 0.22em;
}
.work-title {
font-size: 1.35rem;
}
.work-meta {
padding-top: 12px;
padding-bottom: 12px;
}
}

/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
}
.hero-section {
min-height:auto;
}
.heros-intro {
padding:70px 0 0px;
position:relative;
}
.heros-kicker, .section-label {
display:inline-flex;
color:var(--lux-gold);
letter-spacing:.22em;
text-transform:uppercase;
font-size:12px;
font-weight:600;
margin-bottom:18px;
}
.heros-title, .section-title {
font-family:'Cormorant Garamond', serif;
font-size: clamp(3rem, 7.5vw, 4.5rem);
line-height:0.9;
letter-spacing:-.04em;
margin-bottom:22px;
font-weight: 300;
}
.heros-title span, .accent {
color:var(--lux-gold);
font-style:italic;
}
.heros-text {
color:var(--lux-muted);
font-size:17px;
line-height:1.8;
max-width:670px;
}
.heros-badges {
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:30px;
}
.heros-badges span {
border:1px solid var(--lux-border);
background:rgba(255, 255, 255, .06);
border-radius:999px;
padding:10px 16px;
font-size:12px;
letter-spacing:.08em;
color:rgba(255, 247, 234, .82);
}
.luxar-coverflow-section {
padding: 40px 0 70px;
position: relative;
overflow: hidden;
}
.glass-panel {
position: relative;
padding: 45px;
border-radius: 30px;
background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .18);
backdrop-filter: blur(18px);
overflow: hidden;
}
.luxarCoverflow .swiper-slide:after {
content:'Click to Preview';
position:absolute;
left:22px;
right:22px;
bottom:20px;
padding:12px 16px;
border-radius:999px;
background:rgba(0, 0, 0, .48);
color:#fff;
font-size:11px;
text-transform:uppercase;
letter-spacing:.15em;
opacity:0;
transform:translateY(12px);
transition:.35s ease;
text-align:center;
backdrop-filter:blur(10px);
}
.luxarCoverflow .swiper-slide:hover:after {
opacity:1;
transform:translateY(0);
}
.luxarCoverflow .swiper-slide img {
width:100%;
height:100%;
object-fit:cover;
transition:transform 1s ease;
}
.luxarCoverflow .swiper-slide:hover img {
transform:scale(1.06);
}
.luxarCoverflow .swiper-slide:not(.swiper-slide-active) {
filter:blur(.6px) brightness(.72) saturate(.85);
}
.luxar-slider-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.luxar-slider-heading h3 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 4vw, 46px);
line-height: 1;
margin: 0;
font-style: italic;
color: var(--gold-soft);
}
.heading-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.heading-actions a {
color: #fff8e8;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, .25);
padding: 10px 18px;
border-radius: 50px;
font-size: 14px;
transition: .3s ease;
}
.heading-actions a:hover {
background: #e8c875;
color: #111;
border-color: #e8c875;
}
.luxarCoverflow {
width: 100%;
padding: 25px 55px 45px;
overflow: hidden;
}
.luxarCoverflow .swiper-slide {
width: 100%;
height: 100%;
border-radius: 26px;
overflow: hidden;
background: rgba(255, 255, 255, .08);
}
.luxarCoverflow .swiper-slide img {
width: 100%;
display: block;
}
/* Arrows */
.luxarCoverflow .swiper-button-prev, .luxarCoverflow .swiper-button-next {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
border: 1px solid rgba(232, 200, 117, .55);
color: #e8c875;
backdrop-filter: blur(10px);
transition: .3s ease;
z-index: 20;
}
.luxarCoverflow .swiper-button-prev:hover, .luxarCoverflow .swiper-button-next:hover {
background: #e8c875;
color: #111;
transform: scale(1.08);
}
.luxarCoverflow .swiper-button-prev::after, .luxarCoverflow .swiper-button-next::after {
font-size: 18px;
font-weight: 700;
}
.luxarCoverflow .swiper-button-prev {
left: 5px;
}
.luxarCoverflow .swiper-button-next {
right: 5px;
}

/* Laptop */
@media (max-width: 1199px) {
.glass-panel {
padding: 36px;
}
.luxarCoverflow .swiper-slide {
width: 100%;
height: 100%;
}
}

/* iPad / Tablet */
@media (max-width: 991px) {
.luxar-coverflow-section {
padding: 30px 0 55px;
}
.glass-panel {
padding: 30px;
border-radius: 24px;
}
.luxarCoverflow {
padding: 20px 48px 38px;
}
.luxarCoverflow .swiper-slide {
width: 100%;
height: 100%;
}
.luxarCoverflow .swiper-button-prev,  .luxarCoverflow .swiper-button-next {
width: 46px;
height: 46px;
}
}

/* Mobile */
@media (max-width: 767px) {
.glass-panel {
padding: 24px 16px;
}
.luxar-slider-heading {
justify-content: center;
text-align: center;
}
.heading-actions {
justify-content: center;
}
.luxarCoverflow {
padding: 18px 38px 34px;
}
.luxarCoverflow .swiper-slide {
width: 100%;
height: 100%;
border-radius: 20px;
}
.luxarCoverflow .swiper-button-prev,  .luxarCoverflow .swiper-button-next {
width: 40px;
height: 40px;
}
.luxarCoverflow .swiper-button-prev::after,  .luxarCoverflow .swiper-button-next::after {
font-size: 15px;
}
}

/* iPhone small */
@media (max-width: 480px) {
.luxarCoverflow {
padding: 15px 30px 30px;
}
.luxarCoverflow .swiper-slide {
width: 100%;
height: 100%;
}
.heading-actions a {
padding: 9px 14px;
font-size: 13px;
}
}
.image-lightbox {
position:fixed;
inset:0;
z-index:9999;
background:rgba(5, 4, 3, .88);
backdrop-filter:blur(16px);
display:none;
align-items:center;
justify-content:center;
padding:24px;
}
.image-lightbox.active {
display:flex;
animation:fadeIn .25s ease both;
}
.lightbox-frame {
position:relative;
width:min(92vw, 980px);
}
.lightbox-img {
width:100%;
max-height:82vh;
object-fit:contain;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
position:absolute;
width:48px;
height:48px;
border-radius:50%;
border:1px solid rgba(255, 255, 255, .22);
background:rgba(255, 255, 255, .09);
color:#fff;
display:grid;
place-items:center;
font-size:26px;
cursor:pointer;
transition:.3s ease;
backdrop-filter:blur(12px);
}
.lightbox-close {
right: 15px;
top: 15px;
}
.lightbox-prev {
left:-70px;
top:50%;
transform:translateY(-50%);
}
.lightbox-next {
right:-70px;
top:50%;
transform:translateY(-50%);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
background:var(--lux-gold);
color:#120c07;
}
.lightbox-caption {
text-align:center;
color:var(--lux-muted);
margin-top:16px;
font-size:13px;
letter-spacing:.08em;
display:none;
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@media(max-width:991px) {
.custom-navbar {
padding:18px 0;
}
.navbar-collapse {
background:rgba(10, 8, 7, .94);
border:1px solid var(--lux-border);
border-radius:20px;
padding:18px;
margin-top:14px;
}
.gallery-link-wrap {
text-align:left;
margin-top:20px;
}
.lightbox-prev {
left:10px;
}
.lightbox-next {
right:10px;
}
.lightbox-close {
right:4px;
top:-60px;
}
}
@media(max-width:575px) {
.heros-intro {
padding:42px 0 24px;
}
.glass-panel {
padding:18px;
border-radius:24px;
}
.luxar-slider-heading a {
padding:10px 14px;
}
.luxarCoverflow .swiper-slide {
border-radius:22px;
}
}


/* =========================
LAPTOP ONLY
========================= */
@media (min-width: 1300px) and (max-width: 1600px) {
.work-image {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
transition: transform 0.55s ease;
}
/*.luxarCoverflow {
padding-bottom: 80px;
}
.luxarCoverflow .swiper-slide {
aspect-ratio: 4 / 3.6 !important;
overflow: hidden !important;
border-radius: 30px !important;
}
.luxarCoverflow .swiper-slide img {
width: 100% !important;
height: 100% !important;
object-fit:revert !important;
object-position: center center !important;
border-radius: 30px !important;
}*/
.section-packages {
padding-bottom: 90px;
overflow: visible;
}
.section-packages .row {
align-items: stretch;
}
.section-packages .col-lg-4 {
display: flex;
}
.pricing-card {
min-height: auto !important;
height: 100% !important;
padding: 38px 26px 34px !important;
overflow: visible !important;
display: flex;
flex-direction: column;
}
.pricing-card .features {
flex: 1;
margin-bottom: 22px;
}
.pricing-card .btn-gold {
margin-top: auto;
}
}
/* =========================
TABLET ONLY
========================= */
/* TABLET PORTFOLIO FORCE 3 COLUMNS */
@media screen and (min-width: 700px) and (max-width: 1100px) {
.portfolio-grid > .col-md-6 {
flex: 0 0 33.333333% !important;
max-width: 33.333333% !important;
width: 33.333333% !important;
}
.work-image {
aspect-ratio: 4 / 5.25!important;
}
.work-title {
font-size: 1.2rem!important;
}
}
@media (min-width: 1000px) and (max-width: 1199px) {
.container, .container-lg, .container-md, .container-sm {
max-width: 1060px!important;
}
.navbar-nav .nav-link {
font-size:10px;
}
.tag-chip {
width: auto;
font-size: 7px;
}
.portfolio-grid > .col-md-6 {
flex: 0 0 33.333333% !important;
max-width: 33.333333% !important;
width: 33.333333% !important;
}
.work-image {
aspect-ratio: 4 / 5.25!important;
}
.work-title {
font-size: 1.2rem!important;
}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
.pricing-card {
min-height: auto !important;
height: 100% !important;
padding: 38px 26px 34px !important;
overflow: visible !important;
display: grid;
flex-direction: column;
}
}
.section-packages .pricing-card {
height: 100%;
display: flex;
flex-direction: column;
}
.section-packages .features {
flex: 1;
margin-bottom: 25px;
}
.section-packages .price {
min-height: 48px;
display: flex;
align-items: baseline;
gap: 6px;
}
.section-packages .pricing-card a {
margin-top: auto;
display: block;
text-decoration: none;
}
.section-packages .btn-gold {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
border: none;
cursor: pointer;
}
@media (max-width: 991px) {
.section-packages .pricing-card {
min-height: auto;
}
}
@media (max-width: 575px) {
.section-packages .price {
font-size: 38px;
}
.section-packages .btn-gold {
min-height: 50px;
}
}
.stat-number {
	font-family:'Inter', sans-serif;
font-size:22px;
font-weight:400;
line-height:1;
letter-spacing:-0.5px;
margin-bottom:12px;
text-align:center;
}
.stat-label {
font-size:14px;
font-weight:600;
color: var(--white-soft);
text-align:center;
}
.stat-text {
font-size:14px;
line-height:1.5;
color: var(--white-soft);
max-width:350px;
margin:0 auto;
text-align:center;
}
.luxar-terms-page {
padding: 20px 20px;
background: linear-gradient(90deg, var(--bg-hero-left) 0%, var(--bg-hero-mid) 50%, var(--bg-hero-right) 100%);
}
.luxar-terms-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 40px 40px;
border: 1px solid rgba(214, 175, 95, 0.22);
border-radius: 28px;
}
.luxar-terms-page span {
display: inline-block;
color: #d6af5f;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 18px;
}
.luxar-terms-page h1 {
color: #ffffff;
font-size: clamp(42px, 4vw, 48px);
line-height: 1;
font-weight: 500;
margin: 0 0 28px;
letter-spacing: -2px;
font-family: 'Cormorant Garamond', serif;
}
.luxar-terms-page h2 {
color: #f4d48a;
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
margin: 20px 0 14px;
font-family: 'Cormorant Garamond', serif;
}
.luxar-terms-page p {
color: rgba(255, 255, 255, 0.76);
font-size: 17px;
line-height: 1.5;
margin: 0 0 18px;
font-family: "Inter", Arial, sans-serif;
}
.luxar-terms-page p a {
color: #f4d48a;
}
.luxar-terms-page p a:hover {
color: rgba(255, 255, 255, 0.76);
}
.luxar-terms-page .luxar-intro {
color: rgba(255, 255, 255, 0.9);
font-size: 19px;
border-left: 3px solid #d6af5f;
padding-left: 22px;
margin-bottom: 34px;
}
@media (max-width: 768px) {
.luxar-terms-page {
padding: 80px 15px;
}
.luxar-terms-wrap {
padding: 45px 25px;
border-radius: 22px;
}
.luxar-terms-page p {
font-size: 16px;
line-height: 1.75;
}
}
.portfolio-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
    padding:12px 26px;
    border-radius:50px;
    background:#183847;
    color:#e0bc60;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    transition:.35s ease;
    border:1px solid #e0bc60;
	width:100%;
}

.work-card:hover .portfolio-btn{
    background:#c79a3f;
    border-color:#c79a3f;
    color:#fff;
    transform:translateY(-3px);
}

.portfolio-btn i{
    transition:.35s;
}

.work-card:hover .portfolio-btn i{
    transform:translateX(6px);
}