/* ==========================================
   LUXURY DESIGN SYSTEM
========================================== */

:root {

  /* COLORS */

  --primary: #111111;
  --secondary: #555555;
  --white: #ffffff;
  --soft: #f8f8f8;
  --border: #ececec;

  --gold: #B8945D;
  --gold-light: #C8A977;

  --champagne: #C6A96A;
  --champagne-soft: #E8D9B8;
  --champagne-deep: #9A7B45;
  --ink: #111111;
  --paper-soft: #FAF8F4;

  --success: #22c55e;
  --danger: #ef4444;

  /* TYPOGRAPHY */

  --heading:'Cormorant Garamond',
  serif;
  --body:'Plus Jakarta Sans',
  sans-serif;

  /* CONTAINER */

  --container:1320px;

  /* BORDER */

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;

  /* SHADOW */

  --shadow-sm: 0 5px 20px rgba(0, 0, 0, .05);

  --shadow-md: 0 15px 45px rgba(0, 0, 0, .08);

  --shadow-lg: 0 25px 70px rgba(0, 0, 0, .12);

  /* SPACING */

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:60px;
  --space-6:90px;
  --space-7:120px;

  /* TRANSITION */

  --transition:.4s ease;

}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {

  scroll-behavior: smooth;

  font-size: 16px;

}

body {

  font-family: var(--body);

  background: var(--white);

  color: var(--primary);

  overflow-x: hidden;

  line-height: 1.7;

  -webkit-font-smoothing: antialiased;

}

img {

  width: 100%;

  display: block;

  object-fit: cover;

}

a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition);

}

button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  outline: none;

  background: none;

}

ul {

  list-style: none;

}

section {

  padding: 120px 0;

}

.container {

  max-width: var(--container);

  margin: auto;

  padding-inline: 32px;

}


h1,
h2,
h3 {

  font-family: var(--heading);

  font-weight: 600;

  letter-spacing: -1px;

  color: var(--primary);

}

h1 {

  font-size: clamp(60px, 7vw, 92px);

  line-height: 1;

}

h2 {

  font-size: clamp(42px, 5vw, 64px);

  margin-bottom: 24px;

}

h3 {

  font-size: 30px;

}

h4 {

  font-family: var(--body);

  font-size: 18px;

  font-weight: 700;

}

p {

  font-size: 17px;

  color: var(--secondary);

  line-height: 1.9;

}

em {

  font-style: normal;

  color: var(--gold);

  font-weight: 600;

}




::selection {

  background: var(--gold);

  color: #fff;

}

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-thumb {

  background: var(--gold);

  border-radius: 20px;

}

::-webkit-scrollbar-track {

  background: #f5f5f5;

}







/*==========================================
            PREMIUM NAVBAR
==========================================*/

.luxury-nav {

  position: fixed;

  top: 20px;

  left: 50%;

  transform: translateX(-50%);

  width: 95%;

  max-width: 1450px;

  height: 84px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  background: rgba(255, 255, 255, .72);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, .55);

  border-radius: 22px;

  box-shadow:

    0 20px 60px rgba(0, 0, 0, .08),

    0 5px 20px rgba(0, 0, 0, .04);

  transition: .45s ease;

}

.luxury-nav.scrolled {

  top: 10px;

  height: 76px;

  background: rgba(255, 255, 255, .92);

  box-shadow:

    0 25px 70px rgba(0, 0, 0, .12);

}





.nav-container{

width:100%;

max-width:1380px;

padding:0 35px;

display:flex;

align-items:center;

justify-content:space-between;

}




/* LOGO */

.nav-brand{

display:flex;

align-items:center;

gap:15px;

}

.nav-brand img{

height:64px;

width:auto;

transition:.4s;

}

.nav-brand:hover img{

transform:scale(1.05);

}



/* MENU */

.nav-menu{

display:flex;

align-items:center;

gap:45px;

}

.nav-link{

position:relative;

font-size:15px;

font-weight:600;

letter-spacing:.5px;

color:#222;

transition:.35s;

}

.nav-link:hover{

color:var(--gold);

}




.nav-link::after{

content:"";

position:absolute;

left:50%;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

border-radius:10px;

transform:translateX(-50%);

transition:.35s;

}

.nav-link:hover::after{

width:70%;

}




.nav-actions{

display:flex;

align-items:center;

gap:18px;

}



/* PHONE */

.nav-phone{

padding:15px 24px;

border-radius:50px;

background:#fff;

border:1px solid #ececec;

font-size:15px;

font-weight:600;

box-shadow:

0 8px 20px rgba(0,0,0,.05);

transition:.35s;

}

.nav-phone:hover{

transform:translateY(-3px);

background:#111;

color:#fff;

}



/* CTA */

.nav-cta{

padding:16px 34px;

border-radius:50px;

background:#111;

color:#fff;

font-size:14px;

font-weight:700;

letter-spacing:.6px;

transition:.35s;

box-shadow:

0 18px 35px rgba(0,0,0,.18);

}

.nav-cta:hover{

background:var(--gold);

transform:translateY(-4px);

box-shadow:

0 20px 45px rgba(184,148,93,.35);

}



/* ADMIN */

.nav-admin {

  padding: 13px 22px;

  border-radius: 50px;

  border: 1px solid #ddd;

  font-size: 14px;

  font-weight: 700;

  transition: .35s;

}

.nav-admin:hover {

  background: #111;

  color: #fff;

  border-color: #111;

}

/* TOGGLE */

.nav-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 6px;

  background: #fff;

  box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

}

.nav-toggle span {

  width: 22px;

  height: 2px;

  background: #111;

  border-radius: 10px;

  transition: .35s;

}

.nav-toggle:hover {

  transform: rotate(90deg);

}

/* MOBILE MENU — base shell; layout refined in css/shell-polish.css */

.mobile-menu {

  position: fixed;

  inset: 0;

  width: 100%;

  max-width: 100%;

  height: 100dvh;

  background: #f7f5f1;

  z-index: 9998;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .35s ease, visibility .35s ease;

  box-shadow: none;

}

.mobile-menu.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

.mobile-menu-container {

  padding: 18px 20px;

  display: flex;

  min-height: 100dvh;

  height: 100dvh;

  flex-direction: column;

  box-sizing: border-box;

}

.mobile-menu-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0;

  flex-shrink: 0;

}

.mobile-logo {

  height: 84px;

  width: auto;

  max-width: 110px;

  object-fit: contain;

}

.mobile-close {

  width: 46px;

  height: 46px;

  border: 0;

  border-radius: 50%;

  background: #111;

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  line-height: 1;

  display: grid;

  place-items: center;

  transition: .3s;

}

.mobile-close:hover {

  background: var(--gold);

  color: #111;

  transform: scale(1.04);

}

.mobile-menu-links {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  gap: 0;

  margin-top: 8px;

  border-top: 1px solid rgba(17, 17, 17, 0.08);

}

.mobile-link {

  font-family: var(--heading, "Cormorant Garamond", Georgia, serif);

  font-size: clamp(32px, 8.2vw, 40px);

  font-weight: 600;

  padding: 13px 0;

  border-bottom: 1px solid rgba(17, 17, 17, 0.08);

  transition: .3s;

}

.mobile-link:hover {

  color: var(--gold);

  padding-left: 6px;

}

.mobile-menu-footer {

  margin-top: auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

  flex-shrink: 0;

  padding-top: 14px;

}

.mobile-phone {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 12px 16px;

  text-align: center;

  border-radius: 999px;

  border: 1px solid rgba(17, 17, 17, 0.12);

  background: #fff;

  font-weight: 650;

  text-decoration: none;

  color: #111;

}

.mobile-admin {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 12px 16px;

  background: #111;

  color: #fff;

  text-align: center;

  border-radius: 999px;

  font-weight: 700;

  text-decoration: none;

  transition: .35s;

}

.mobile-admin:hover {

  background: var(--gold);

  color: #111;

}

/* RESPONSIVE */

@media(max-width:1100px) {

  .nav-menu,
  .nav-actions {

    display: none;

  }

  .nav-toggle {

    display: flex;

  }

}

@media(max-width:768px) {

  .luxury-nav {

    padding: 18px 0;

  }

  .nav-container {

    padding: 0 20px;

  }

  .nav-brand img {

    height: 46px;

  }

  .mobile-menu {

    width: 100%;

  }

}



/* ===============================
   HERO SECTION
================================ */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:850px;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-slider{
    width:100%;
    height:100%;
    position:relative;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:1.2s ease;
}

.hero-slide.active{
    opacity:1;
    z-index:1;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.08);
    animation:zoomHero 18s linear infinite;
}

@keyframes zoomHero{

0%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

.hero-overlay{

position:absolute;
inset:0;

background:

linear-gradient(
90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.82) 28%,
rgba(255,255,255,.45) 55%,
rgba(255,255,255,.12) 100%
);

}

.hero-content{

position:relative;

z-index:10;

max-width:1450px;

margin:auto;

width:100%;

padding:0 70px;

display:flex;

justify-content:space-between;

align-items:flex-end;

height:100%;

padding-top:180px;

padding-bottom:80px;

}

.hero-content-inner{

max-width:720px;

}

.hero-label{

display:inline-block;

padding:12px 28px;

background:#fff;

border-radius:50px;

font-size:13px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:#b89055;

box-shadow:0 20px 45px rgba(0,0,0,.08);

margin-bottom:35px;

}

.hero-title{

font-family:'Cormorant Garamond',serif;

font-size:88px;

font-weight:600;

line-height:1.02;

color:#111;

margin-bottom:30px;

letter-spacing:-2px;

}

.hero-title em{

font-style:normal;

color:#c7a064;

font-weight:500;

}

.hero-subtitle{

font-size:22px;

line-height:1.9;

max-width:620px;

color:#555;

margin-bottom:55px;

font-weight:300;

}

.hero-cta{

display:flex;

gap:20px;

align-items:center;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

height:62px;

padding:0 38px;

background:#111;

color:#fff;

border-radius:50px;

font-size:15px;

font-weight:600;

letter-spacing:.5px;

transition:.35s;

box-shadow:0 25px 40px rgba(0,0,0,.15);

}

.btn-primary:hover{

background:#c8a46d;

transform:translateY(-5px);

box-shadow:0 35px 60px rgba(0,0,0,.20);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

height:62px;

padding:0 38px;

border:2px solid #111;

border-radius:50px;

background:#fff;

color:#111;

font-size:15px;

font-weight:600;

transition:.35s;

}

.btn-secondary:hover{

background:#111;

color:#fff;

transform:translateY(-5px);

}

.hero-stats{

background:rgba(255,255,255,.94);

backdrop-filter:blur(30px);

border-radius:28px;

padding:38px 55px;

display:flex;

gap:60px;

box-shadow:0 35px 80px rgba(0,0,0,.12);

border:1px solid rgba(255,255,255,.8);

}

.hero-stat{

display:flex;

flex-direction:column;

gap:8px;

position:relative;

}

.hero-stat:not(:last-child)::after{

content:"";

position:absolute;

right:-30px;

top:0;

height:100%;

width:1px;

background:#ececec;

}

.stat-number{

font-family:'Cormorant Garamond',serif;

font-size:56px;

font-weight:700;

color:#111;

line-height:1;

}

.stat-label{

font-size:12px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:#777;

line-height:1.8;

}

.hero-scroll{

position:absolute;

left:70px;

bottom:40px;

display:flex;

align-items:center;

gap:18px;

z-index:15;

}

.hero-scroll span{

font-size:12px;

letter-spacing:5px;

font-weight:600;

text-transform:uppercase;

color:#222;

}

.scroll-line{

width:1px;

height:70px;

background:#111;

position:relative;

overflow:hidden;

}

.scroll-line::before{

content:"";

position:absolute;

left:0;

top:-100%;

width:100%;

height:40px;

background:#c7a064;

animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

0%{

top:-100%;

}

100%{

top:120%;

}

}






/*=========================================
            CONTENT
=========================================*/

.hero-content {

  position: relative;

  z-index: 5;

  max-width: 1320px;

  margin: auto;

  height: 100%;

  padding: 150px 35px 60px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

}

.hero-content-inner {

  max-width: 640px;

}

.hero-label {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;

  background: #fff;

  border: 1px solid #ececec;

  border-radius: 50px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 28px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .05);

}

.hero-title {

  font-size: clamp(64px, 8vw, 95px);

  line-height: 1;

  font-weight: 700;

  margin-bottom: 30px;

  color: #111;

}

.hero-title em {

  font-style: normal;

  color: var(--gold);

}

.hero-subtitle {

  max-width: 560px;

  font-size: 18px;

  line-height: 2;

  color: #555;

  margin-bottom: 45px;

}

/*=========================================
        BUTTONS
=========================================*/

.hero-cta {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

}

.btn-primary {

  padding: 18px 34px;

  background: #111;

  color: #fff;

  border-radius: 60px;

  font-weight: 700;

  transition: .35s;

  box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.btn-primary:hover {

  background: var(--gold);

  transform: translateY(-4px);

}

.btn-secondary {

  padding: 18px 34px;

  border: 2px solid #111;

  border-radius: 60px;

  font-weight: 700;

  transition: .35s;

  background: #fff;

}

.btn-secondary:hover {

  background: #111;

  color: #fff;

}



/*=========================================
        HERO FLOATING STATS
=========================================*/

.hero-stats {

  position: absolute;

  right: 35px;

  bottom: 80px;

  display: flex;

  gap: 18px;

  padding: 24px;

  border-radius: 28px;

  background: rgba(255, 255, 255, .82);

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);

  box-shadow: 0 30px 80px rgba(0, 0, 0, .12);

  border: 1px solid rgba(255, 255, 255, .65);

}

.hero-stat {

  min-width: 155px;

  padding: 12px 18px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  border-right: 1px solid rgba(0, 0, 0, .08);

}

.hero-stat:last-child {

  border-right: none;

}

.stat-number {

  font-family: var(--heading);

  font-size: 48px;

  font-weight: 700;

  color: #111;

  line-height: 1;

  margin-bottom: 10px;

}

.stat-label {

  font-size: 13px;

  font-weight: 700;

  color: #666;

  text-transform: uppercase;

  letter-spacing: 1.5px;

}

/*=========================================
        HERO SCROLL
=========================================*/

.hero-scroll {

  position: absolute;

  left: 40px;

  bottom: 45px;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 14px;

  color: #222;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

}

.scroll-line {

  width: 2px;

  height: 70px;

  background: #ddd;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

}

.scroll-line::before {

  content: "";

  position: absolute;

  left: 0;

  top: -40px;

  width: 100%;

  height: 40px;

  background: linear-gradient(to bottom,
      var(--gold),
      #111);

  animation: scrollMove 2s infinite;

}

@keyframes scrollMove {

  0% {

    transform: translateY(0);

  }

  100% {

    transform: translateY(110px);

  }

}

/*=========================================
        HERO DECORATION
=========================================*/

.hero::before {

  content: "";

  position: absolute;

  top: 160px;

  right: -140px;

  width: 420px;

  height: 420px;

  background: radial-gradient(circle,
      rgba(184, 148, 93, .18),
      transparent 70%);

  z-index: 2;

  pointer-events: none;

}

.hero::after {

  content: "";

  position: absolute;

  left: -120px;

  bottom: -120px;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(184, 148, 93, .10),
      transparent 70%);

  pointer-events: none;

}

/*=========================================
        HERO CONTENT ANIMATION
=========================================*/

.hero-label,
.hero-title,
.hero-subtitle,
.hero-cta {

  opacity: 0;

  transform: translateY(40px);

  animation: heroFade .9s forwards;

}

.hero-title {

  animation-delay: .2s;

}

.hero-subtitle {

  animation-delay: .4s;

}

.hero-cta {

  animation-delay: .6s;

}

@keyframes heroFade {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/*=========================================
        BUTTON EXTRA EFFECT
=========================================*/

.btn-primary,
.btn-secondary {

  position: relative;

  overflow: hidden;

}

.btn-primary::before,
.btn-secondary::before {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 120%;

  height: 100%;

  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .35),
      transparent);

  transition: .7s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before {

  left: 130%;

}



/*=========================================
        HERO RESPONSIVE
=========================================*/

@media (max-width:1200px) {

  .hero {

    min-height: 760px;

  }

  .hero-content {

    padding: 140px 30px 60px;

    gap: 40px;

  }

  .hero-content-inner {

    max-width: 560px;

  }

  .hero-title {

    font-size: clamp(54px, 7vw, 72px);

  }

  .hero-subtitle {

    font-size: 17px;

    max-width: 500px;

  }

  .hero-stats {

    right: 30px;

    bottom: 50px;

    padding: 20px;

    gap: 15px;

  }

  .hero-stat {

    min-width: 130px;

    padding: 8px 12px;

  }

  .stat-number {

    font-size: 38px;

  }

}


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

@media (max-width:992px) {

  .hero {

    min-height: auto;

    height: auto;

    padding-top: 110px;

    padding-bottom: 70px;

  }

  .hero-content {

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding: 70px 24px;

  }

  .hero-content-inner {

    max-width: 100%;

  }

  .hero-title {

    font-size: clamp(46px, 8vw, 62px);

  }

  .hero-subtitle {

    max-width: 100%;

    font-size: 16px;

    line-height: 1.9;

  }

  .hero-cta {

    margin-top: 10px;

  }

  .hero-stats {

    position: relative;

    right: auto;

    bottom: auto;

    margin-top: 55px;

    width: 100%;

    justify-content: space-between;

    flex-wrap: wrap;

  }

  .hero-stat {

    flex: 1;

    min-width: 150px;

    border-right: none;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    padding: 18px 10px;

  }

  .hero-scroll {

    display: none;

  }

}


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

@media (max-width:768px) {

  .hero {

    padding-top: 90px;

  }

  .hero-overlay {

    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .80) 45%,
        rgba(255, 255, 255, .55) 100%);

  }

  .hero-content {

    padding: 45px 20px;

  }

  .hero-title {

    font-size: 42px;

    line-height: 1.08;

  }

  .hero-label {

    font-size: 11px;

    letter-spacing: 2px;

    padding: 8px 15px;

  }

  .hero-subtitle {

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 35px;

  }

  .hero-cta {

    flex-direction: column;

    align-items: stretch;

    gap: 15px;

  }

  .btn-primary,

  .btn-secondary {

    width: 100%;

    text-align: center;

    padding: 17px 22px;

  }

  .hero-stats {

    margin-top: 45px;

    padding: 16px;

    gap: 0;

    border-radius: 20px;

  }

  .hero-stat {

    min-width: 100%;

    text-align: center;

    align-items: center;

    padding: 18px 0;

  }

  .stat-number {

    font-size: 34px;

  }

  .stat-label {

    font-size: 12px;

  }

  .hero::before,

  .hero::after {

    display: none;

  }

}


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

@media (max-width:480px) {

  .hero {

    min-height: 680px;

  }

  .hero-content {

    padding: 35px 18px;

  }

  .hero-title {

    font-size: 34px;

  }

  .hero-subtitle {

    font-size: 14px;

  }

  .hero-label {

    font-size: 10px;

  }

  .hero-stats {

    padding: 14px;

  }

  .stat-number {

    font-size: 28px;

  }

  .stat-label {

    font-size: 11px;

    letter-spacing: 1px;

  }

  .nav-brand img {

    height: 42px;

  }

}


/*=========================================
        IMAGE OPTIMIZATION
=========================================*/

.hero-slide img {

  image-rendering: auto;

  backface-visibility: hidden;

  will-change: transform;

  transform-origin: center center;

}


/*=========================================
        ACCESSIBILITY
=========================================*/

@media (prefers-reduced-motion:reduce) {

  .hero-slide,

  .hero-slide img,

  .hero-label,

  .hero-title,

  .hero-subtitle,

  .hero-cta,

  .scroll-line::before {

    animation: none !important;

    transition: none !important;

  }

}






/* SECTIONS GENERAL */
section {
  padding: var(--spacing-xl) 0;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.section-title {
  margin-bottom: var(--spacing-lg);
  line-height: 1.1;
}






/* ABOUT SECTION */
.about {
  padding: clamp(110px, 10vw, 170px) 0;
  background: #ffffff;
  color: var(--primary, #111111);
  overflow: hidden;
}

.about-container {
  width: min(100% - 64px, 1460px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(64px, 7vw, 126px);
  align-items: center;
}

.about-visual {
  position: relative;
}

.about-main-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: #f7f5f0;
  box-shadow: 0 34px 90px rgba(17, 17, 17, .10);
}

.about-main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.about-main-image:hover img {
  transform: scale(1.075);
}

.about-floating-card {
  position: absolute;
  right: clamp(20px, 4vw, 52px);
  bottom: clamp(-38px, -3vw, -26px);
  min-width: 218px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #ececec;
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 64px rgba(17, 17, 17, .10);
}

.float-year {
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(58px, 5.2vw, 78px);
  font-weight: 700;
  line-height: .85;
  color: #111111;
}

.float-label {
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, .58);
}

.about-content {
  padding: clamp(10px, 2vw, 24px) 0;
}

.about .section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold, #C8A96A);
}

.about .section-label::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold, #C8A96A);
}

.about .section-title {
  margin: 0;
  max-width: 760px;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(48px, 5.4vw, 82px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: 0;
  color: #111111;
}

.about .section-title em {
  color: var(--gold, #C8A96A);
  font-style: italic;
  font-weight: 500;
}

.about-text {
  max-width: 680px;
  margin: 30px 0 0;
}

.about-text p {
  margin: 0;
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.12vw, 18px);
  font-weight: 400;
  line-height: 1.95;
  color: rgba(17, 17, 17, .64);
}

.about-features {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-feature-card {
  min-height: 150px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid #ececec;
  border-radius: 28px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 18px 46px rgba(17, 17, 17, .045);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), border-color .45s cubic-bezier(.16, 1, .3, 1);
}

.about-feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(200, 169, 106, .45);
  box-shadow: 0 28px 62px rgba(17, 17, 17, .075);
}

.about-feature-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #111111;
  color: var(--gold, #C8A96A);
  font-size: 13px;
}

.about-feature-card h4 {
  margin: 0 0 8px;
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #111111;
}

.about-feature-card p {
  margin: 0;
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(17, 17, 17, .58);
}

.about-bottom {
  margin-top: clamp(82px, 8vw, 128px);
  padding: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  border: 1px solid #ececec;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(17, 17, 17, .055);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.about-stat {
  padding: 8px 28px;
  border-right: 1px solid #ececec;
}

.about-stat:first-child {
  padding-left: 0;
}

.about-stat:last-child {
  border-right: 0;
}

.about-stat-number {
  display: block;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(44px, 4vw, 66px);
  font-weight: 700;
  line-height: .9;
  color: #111111;
}

.about-stat-number:not([data-about-suffix])::after {
  content: "+";
}

.about-stat-label {
  display: block;
  margin-top: 12px;
  font-family: var(--body, 'Manrope', sans-serif);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, .52);
}

.about-actions {
  min-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.about-actions p {
  margin: 0;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #111111;
}

.about-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.about .btn-primary,
.about .btn-secondary {
  min-height: 58px;
  padding: 0 26px;
}

.about-reveal {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.about-reveal.fade-up { transform: translateY(36px); }
.about-reveal.slide-left { transform: translateX(44px); }
.about-reveal.slide-right { transform: translateX(-44px); }
.about-reveal.is-visible { opacity: 1; transform: translate(0, 0); }

/* WORK SECTION */
.work {
  background-color: var(--color-white);
}

.work-header {
  max-width: 1600px;
  margin: 0 auto var(--spacing-lg);
  padding: 0 var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.work-header-content {
  max-width: 600px;
}

.work-filter {
  display: flex;
  gap: var(--spacing-sm);
}

.filter-btn {
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-light-gray);
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--color-black);
}

.work-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 400px;
  gap: var(--spacing-sm);
}

.work-item {
  position: relative;
  overflow: hidden;
}

.work-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.work-item.tall {
  grid-row: span 2;
}

.work-item.wide {
  grid-column: span 2;
}

.work-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-item:hover .work-image img {
  transform: scale(1.05);
}

.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-md);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.work-item:hover .work-overlay {
  opacity: 1;
}

.work-overlay-content {
  color: var(--color-white);
}

.work-overlay-content h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
}

.work-overlay-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

.work-view {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* SERVICES SECTION */
.services {
  background-color: var(--color-off-white);
}

.services-header {
  max-width: 1600px;
  margin: 0 auto var(--spacing-xl);
  padding: 0 var(--spacing-md);
}

.services-list {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.service-item {
  display: grid;
  grid-template-columns: 80px 1fr 400px;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all var(--transition-smooth);
}

.service-item:hover {
  padding: var(--spacing-md) var(--spacing-md);
  background-color: var(--color-white);
}

.service-number {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--color-accent);
  line-height: 1;
}

.service-content h3 {
  margin-bottom: var(--spacing-sm);
}

.service-content p {
  max-width: 500px;
}

.service-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.service-item:hover .service-image img {
  transform: scale(1.05);
}

/* GALLERY SECTION */
.gallery {
  background-color: var(--color-white);
  padding: var(--spacing-xxl) 0;
}

.gallery-header {
  max-width: 1600px;
  margin: 0 auto var(--spacing-lg);
  padding: 0 var(--spacing-md);
}

.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.gallery-search {
  flex: 1 1 260px;
  min-width: 220px;
  padding: 14px 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  font: inherit;
  background: var(--color-off-white);
}

.gallery-search:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(184, 148, 93, 0.15);
}

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gallery-item .gallery-item-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.gallery-item:hover .gallery-item-meta {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item .gallery-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 2rem;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--color-text-muted);
}

.gallery-masonry {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: var(--spacing-sm);
}

.gallery-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 16px;
  display: block;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28));
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
  border-radius: inherit;
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.gallery-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* TESTIMONIALS SECTION */
.testimonials {
  background-color: var(--color-off-white);
  padding: var(--spacing-xxl) 0;
}

.testimonials-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  text-align: center;
}

.testimonials-header {
  margin-bottom: var(--spacing-xl);
}

.testimonials-slider {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.testimonial-item {
  display: none;
}

.testimonial-item.active {
  display: block;
  animation: fadeSlide 0.8s ease-out;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.testimonial-content {
  background-color: var(--color-white);
  padding: var(--spacing-xl);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
}

.testimonial-quote {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.quote-icon {
  font-family: var(--font-serif);
  font-size: 8rem;
  color: var(--color-accent);
  line-height: 1;
  opacity: 0.3;
  position: absolute;
  top: -40px;
  left: -20px;
}

.testimonial-quote p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-charcoal);
  max-width: 700px;
  margin: 0 auto;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.author-info h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xs);
}

.author-info p {
  font-size: 0.9rem;
}

.author-rating {
  color: var(--color-accent);
  font-size: 0.9rem;
}

.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.testimonial-nav-btn {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.testimonial-nav-btn:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.testimonial-dots {
  display: flex;
  gap: var(--spacing-sm);
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all var(--transition-fast);
}

.testimonial-dot.active {
  background-color: var(--color-black);
}

/* CONTACT SECTION */
.contact {
  background-color: var(--color-white);
}

.contact-layout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.contact-info {
  padding-right: var(--spacing-lg);
}

.contact-description {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
  max-width: 500px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.contact-detail {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.contact-icon {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.2rem;
}

.contact-text h4 {
  margin-bottom: var(--spacing-xs);
}

.contact-text a,
.contact-text p {
  font-size: 1rem;
  color: var(--color-gray);
}

.contact-text a:hover {
  color: var(--color-accent);
}

.contact-social {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.social-link {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #111;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), background 280ms ease, color 280ms ease, border-color 280ms ease;
}

.social-link:hover {
  transform: translateY(-3px);
  background-color: #111;
  border-color: #111;
  color: #fff;
}

.contact-form-wrapper {
  background-color: var(--color-off-white);
  padding: var(--spacing-xl);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
}

.form-submit {
  padding: 18px 48px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all var(--transition-smooth);
}

.form-submit:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* FOOTER */
.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  height: 50px;
  margin-bottom: var(--spacing-md);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 400px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.footer-links-column h4 {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.footer-links-column a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}

.footer-links-column a:hover {
  color: var(--color-accent);
}

.footer-links-column p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.footer-bottom-links {
  display: flex;
  gap: var(--spacing-md);
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.footer-bottom-links a:hover {
  color: var(--color-white);
}
/* ==========================================
   ULTRA PREMIUM NAVBAR + HERO REDESIGN
========================================== */
:root {
  --gold: #C6A96A;
  --gold-light: #E4D2A2;
  --primary: #111111;
  --secondary: #565656;
  --white: #ffffff;
  --heading: 'Cormorant Garamond', serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --transition: 420ms cubic-bezier(.16, 1, .3, 1);
}

body { font-family: var(--body); background: #fff; color: var(--primary); }

.luxury-nav {
  position: fixed;
  top: 22px;
  left: 50%;
  width: min(94vw, 1420px);
  height: 82px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(198, 169, 106, 0.28);
  background: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 48%, rgba(250,247,240,.78) 100%);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    0 28px 80px rgba(17, 17, 17, .10),
    0 8px 24px rgba(198, 169, 106, .08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(198, 169, 106, .12);
  transition: top var(--transition), height var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.luxury-nav.scrolled {
  top: 10px;
  height: 72px;
  background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 100%);
  border-color: rgba(198, 169, 106, 0.38);
  box-shadow:
    0 22px 64px rgba(17, 17, 17, .14),
    0 6px 18px rgba(198, 169, 106, .10),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.nav-container { width: 100%; max-width: none; padding: 0 18px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.nav-brand { display: inline-flex; align-items: center; min-width: 178px; }
.nav-brand img { width: auto; height: 62px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(17,17,17,.08)); transition: transform var(--transition), height var(--transition); }
.luxury-nav.scrolled .nav-brand img { height: 54px; }
.nav-brand:hover img { transform: translateY(-1px) scale(1.035); }

.nav-menu { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding: 0 22px; }
.nav-link { position: relative; padding: 28px 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(17,17,17,.62); transition: color var(--transition), transform var(--transition); }
.nav-link::before { content: ''; position: absolute; left: 50%; bottom: 21px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0; transform: translate(-50%, 9px); transition: var(--transition); }
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: 17px; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: translateX(-50%); transition: var(--transition); }
.nav-link:hover { color: #111; transform: translateY(-1px); }
.nav-link:hover::before { opacity: 1; transform: translate(-50%, 0); }
.nav-link:hover::after { width: 120%; }
.nav-link.active { color: #111; }
.nav-link.active::before { opacity: 1; transform: translate(-50%, 0); box-shadow: 0 0 12px rgba(198,169,106,.55); }
.nav-link.active::after { width: 100%; background: linear-gradient(90deg, rgba(198,169,106,.15), var(--gold), rgba(198,169,106,.15)); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-phone, .nav-cta, .mobile-phone, .mobile-admin, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 60px; white-space: nowrap; }
.nav-phone { min-height: 50px; padding: 0 20px; border: 1px solid rgba(17,17,17,.10); background: rgba(255,255,255,.58); color: #111; font-size: 13px; font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.nav-phone i { color: var(--gold); font-size: 12px; }
.nav-phone:hover { transform: translateY(-2px); border-color: #111; background: #111; color: #fff; box-shadow: 0 18px 38px rgba(17,17,17,.18); }
.nav-cta { min-height: 52px; padding: 0 25px; background: #111; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 18px 38px rgba(17,17,17,.19); overflow: hidden; }
.nav-cta i, .btn-primary i, .btn-secondary i { font-size: 12px; transition: transform var(--transition); }
.nav-cta:hover { transform: translateY(-2px); background: var(--gold); color: #111; box-shadow: 0 22px 46px rgba(198,169,106,.32); }
.nav-cta:hover i, .btn-primary:hover i, .btn-secondary:hover i { transform: translateX(4px); }

.nav-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; background: #111; box-shadow: 0 18px 38px rgba(17,17,17,.18); align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.nav-toggle span { width: 19px; height: 1.5px; background: #fff; border-radius: 99px; transition: var(--transition); }
.nav-toggle.active span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.active span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); height: 100vh; z-index: 9998; right: -110%; background: rgba(255,255,255,.86); backdrop-filter: blur(28px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(145%); border-left: 1px solid rgba(198,169,106,.22); box-shadow: -30px 0 80px rgba(17,17,17,.14); transition: right 560ms cubic-bezier(.16,1,.3,1); }
.mobile-menu.active { right: 0; }
.mobile-menu-container { height: 100%; padding: 34px; display: flex; flex-direction: column; }
.mobile-logo { width: auto; height: 58px; object-fit: contain; }
.mobile-close { width: 46px; height: 46px; border-radius: 50%; background: #111; color: #fff; font-size: 25px; line-height: 1; transition: var(--transition); }
.mobile-close:hover { background: var(--gold); color: #111; transform: rotate(90deg); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 0; margin-top: 24px; border-top: 1px solid rgba(17,17,17,.08); }
.mobile-link { padding: 22px 0; border-bottom: 1px solid rgba(17,17,17,.08); font-family: var(--heading); font-size: clamp(34px, 10vw, 54px); line-height: 1; color: #111; transform: translateX(18px); opacity: 0; transition: var(--transition); }
.mobile-menu.active .mobile-link { transform: translateX(0); opacity: 1; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 70ms; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 140ms; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 210ms; }
.mobile-link:hover { color: var(--gold); padding-left: 10px; }
.mobile-menu-footer { margin-top: auto; display: grid; gap: 12px; }
.mobile-phone { min-height: 56px; border: 1px solid rgba(17,17,17,.10); background: rgba(255,255,255,.76); font-weight: 800; }
.mobile-admin { min-height: 58px; background: #111; color: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.hero { position: relative; min-height: 880px; height: 100svh; padding: 0; display: flex; align-items: stretch; overflow: hidden; background: #fff; isolation: isolate; }
.hero-background, .hero-slider, .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide { opacity: 0; transform: scale(1.01); transition: opacity 1500ms ease, transform 1800ms ease; }
.hero-slide.active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; transform: scale(1.09); animation: heroLuxuryZoom 9500ms ease-out forwards; will-change: transform; }
.hero-slide.active img { animation: heroLuxuryZoom 9500ms ease-out forwards; }
@keyframes heroLuxuryZoom { from { transform: scale(1.09); } to { transform: scale(1.015); } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 30%, rgba(255,255,255,.54) 51%, rgba(255,255,255,.14) 76%, rgba(255,255,255,.05) 100%), linear-gradient(180deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 30%, rgba(17,17,17,.10) 100%); }

.hero-content { position: relative; z-index: 5; width: min(100%, 1480px); height: 100%; margin: 0 auto; padding: 178px 54px 78px; display: grid; grid-template-columns: minmax(0, 650px) 1fr; align-items: center; gap: 56px; }
.hero-content-inner { max-width: 650px; }
.hero-label { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(198,169,106,.32); background: rgba(255,255,255,.66); backdrop-filter: blur(16px); color: #8F7340; box-shadow: 0 18px 44px rgba(17,17,17,.07), inset 0 1px 0 rgba(255,255,255,.9); font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.hero-label::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.hero-title { margin: 0 0 28px; font-family: var(--heading); font-size: clamp(58px, 7.6vw, 114px); font-weight: 600; line-height: .92; letter-spacing: 0; color: #111; text-wrap: balance; }
.hero-title em { display: inline-block; color: var(--gold); font-style: italic; font-weight: 500; }
.hero-subtitle { max-width: 600px; margin: 0 0 42px; color: rgba(17,17,17,.68); font-size: clamp(16px, 1.25vw, 20px); font-weight: 400; line-height: 1.95; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-primary, .btn-secondary { min-height: 64px; padding: 0 32px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: var(--transition); overflow: hidden; }
.btn-primary { background: #111; color: #fff; box-shadow: 0 24px 56px rgba(17,17,17,.20); }
.btn-secondary { background: rgba(255,255,255,.70); color: #111; border: 1px solid rgba(17,17,17,.26); backdrop-filter: blur(14px); }
.btn-primary:hover { background: var(--gold); color: #111; transform: translateY(-4px); box-shadow: 0 28px 62px rgba(198,169,106,.34); }
.btn-secondary:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-4px); box-shadow: 0 24px 50px rgba(17,17,17,.16); }
.btn-primary::before, .btn-secondary::before { content: ''; position: absolute; inset: 0 auto 0 -130%; width: 80%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); transition: left 760ms ease; }
.btn-primary:hover::before, .btn-secondary:hover::before { left: 140%; }

.hero-stats { align-self: end; justify-self: end; display: grid; grid-template-columns: repeat(3, minmax(118px, 1fr)); gap: 0; width: min(590px, 100%); padding: 24px; border-radius: 30px; border: 1px solid rgba(255,255,255,.66); background: rgba(255,255,255,.62); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); box-shadow: 0 34px 88px rgba(17,17,17,.15), inset 0 1px 0 rgba(255,255,255,.82); }
.hero-stat { min-width: 0; padding: 10px 22px; border-right: 1px solid rgba(17,17,17,.08); }
.hero-stat:last-child { border-right: 0; }
.hero-stat::after { display: none !important; }
.stat-number { display: block; margin-bottom: 9px; font-family: var(--heading); font-size: clamp(34px, 3.3vw, 54px); line-height: .9; font-weight: 700; color: #111; }
.stat-label { display: block; color: rgba(17,17,17,.56); font-size: 10px; line-height: 1.65; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-scroll { position: absolute; left: clamp(24px, 4vw, 70px); bottom: 38px; z-index: 8; display: flex; align-items: center; gap: 16px; color: #111; }
.hero-scroll span { font-size: 10px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
.scroll-line { width: 1px; height: 74px; background: rgba(17,17,17,.18); overflow: hidden; }
.scroll-line::before { content: ''; position: absolute; top: -45%; left: 0; width: 100%; height: 42%; background: var(--gold); animation: scrollMove 1800ms cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scrollMove { to { transform: translateY(190px); } }
.hero::before, .hero::after { display: none; }
.hero-label, .hero-title, .hero-subtitle, .hero-cta, .hero-stats { opacity: 0; transform: translateY(28px); animation: heroFadeUp 900ms cubic-bezier(.16,1,.3,1) forwards; }
.hero-title { animation-delay: 120ms; }
.hero-subtitle { animation-delay: 240ms; }
.hero-cta { animation-delay: 360ms; }
.hero-stats { animation-delay: 520ms; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .nav-menu, .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  .luxury-nav { height: 76px; }
  .hero { min-height: 820px; }
  .hero-content { grid-template-columns: 1fr; align-content: center; align-items: center; padding: 150px 34px 70px; }
  .hero-stats { justify-self: start; width: min(620px, 100%); }
}

@media (max-width: 767px) {
  .luxury-nav { top: 14px; width: calc(100% - 24px); height: 68px; border-radius: 24px; }
  .luxury-nav.scrolled { top: 8px; height: 64px; }
  .nav-container { padding: 0 10px 0 18px; }
  .nav-brand { min-width: auto; }
  .nav-brand img, .luxury-nav.scrolled .nav-brand img { height: 48px; }
  .nav-toggle { width: 46px; height: 46px; }
  .hero { min-height: 780px; height: auto; padding: 0; margin-top: 0; }
  .hero-slide img { object-position: 70% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.91) 43%, rgba(255,255,255,.50) 72%, rgba(255,255,255,.18) 100%); }
  .hero-content { min-height: 780px; padding: 118px 20px 34px; align-content: start; gap: 32px; }
  .hero-label { margin-bottom: 22px; max-width: 100%; font-size: 10px; letter-spacing: .18em; }
  .hero-label::before { width: 18px; }
  .hero-title { font-size: clamp(48px, 15vw, 66px); line-height: .96; margin-bottom: 22px; }
  .hero-subtitle { font-size: 15px; line-height: 1.75; margin-bottom: 30px; }
  .hero-cta { align-items: stretch; flex-direction: column; gap: 12px; }
  .btn-primary, .btn-secondary { width: 100%; min-height: 58px; padding: 0 22px; }
  .hero-stats { width: 100%; grid-template-columns: 1fr; padding: 12px 20px; border-radius: 24px; }
  .hero-stat { padding: 18px 0; text-align: center; border-right: 0; border-bottom: 1px solid rgba(17,17,17,.08); }
  .hero-stat:last-child { border-bottom: 0; }
  .stat-number { font-size: 42px; }
  .hero-scroll { display: none; }
  .mobile-menu-container { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .luxury-nav, .nav-link, .hero-slide, .hero-slide img, .hero-label, .hero-title, .hero-subtitle, .hero-cta, .hero-stats, .scroll-line::before { animation: none !important; transition: none !important; }
  .hero-label, .hero-title, .hero-subtitle, .hero-cta, .hero-stats { opacity: 1; transform: none; }
}



/* ==========================================
   PREMIUM OUR WORK SECTION
========================================== */
.work {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 10vw, 150px) 0;
  background: #ffffff;
}

.work-header {
  width: min(100% - 48px, 1480px);
  margin: 0 auto clamp(34px, 5vw, 70px);
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.work .section-title {
  margin: 0;
  font-size: clamp(52px, 8vw, 112px);
  line-height: .92;
  letter-spacing: 0;
}

.work-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 50px rgba(17, 17, 17, .07), inset 0 1px 0 rgba(255,255,255,.9);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.work-filter::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  color: rgba(17, 17, 17, .52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  color: #111111;
  background: #f7f3eb;
  box-shadow: inset 0 0 0 1px rgba(198,169,106,.28);
}

.work-grid {
  width: min(100% - 48px, 1480px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 23vw, 360px);
  gap: clamp(14px, 1.4vw, 22px);
}

.work-item {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: clamp(24px, 2.2vw, 38px);
  background: #f7f7f7;
  box-shadow: 0 26px 70px rgba(17, 17, 17, .12), 0 1px 0 rgba(255,255,255,.9) inset;
  isolation: isolate;
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity 760ms cubic-bezier(.16,1,.3,1) var(--work-delay, 0ms), transform 760ms cubic-bezier(.16,1,.3,1) var(--work-delay, 0ms), box-shadow var(--transition), filter var(--transition);
}

.work-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-item.is-hidden {
  display: none;
}

.work-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.work-item.tall {
  grid-row: span 2;
}

.work-item.wide {
  grid-column: span 2;
}

.work-image,
.work-image img {
  width: 100%;
  height: 100%;
}

.work-image {
  position: relative;
  overflow: hidden;
}

.work-image img {
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 1200ms cubic-bezier(.16,1,.3,1), filter 1200ms cubic-bezier(.16,1,.3,1);
}

.work-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(22px, 2.8vw, 38px);
  background: linear-gradient(180deg, rgba(17,17,17,0) 30%, rgba(17,17,17,.18) 58%, rgba(17,17,17,.82) 100%);
  opacity: 0;
  transition: opacity 620ms cubic-bezier(.16,1,.3,1);
}

.work-overlay-content {
  transform: translateY(18px);
  transition: transform 620ms cubic-bezier(.16,1,.3,1);
}

.work-overlay-content span {
  display: block;
  margin-bottom: 9px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.work-overlay-content h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.work-arrow {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #111111;
  transform: translate(14px, 14px) rotate(-35deg);
  opacity: 0;
  transition: transform 620ms cubic-bezier(.16,1,.3,1), opacity 620ms cubic-bezier(.16,1,.3,1), background var(--transition);
}

.work-item:hover {
  box-shadow: 0 34px 90px rgba(17, 17, 17, .18);
}

.work-item:hover .work-image img {
  transform: scale(1.085);
  filter: saturate(1.03) contrast(1.02);
}

.work-item:hover .work-overlay,
.work-item:focus-within .work-overlay {
  opacity: 1;
}

.work-item:hover .work-overlay-content,
.work-item:focus-within .work-overlay-content {
  transform: translateY(0);
}

.work-item:hover .work-arrow,
.work-item:focus-within .work-arrow {
  opacity: 1;
  transform: translate(0, 0) rotate(-35deg);
}

.work-loading {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 32px;
  color: rgba(17,17,17,.52);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.work-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms cubic-bezier(.16,1,.3,1), transform 760ms cubic-bezier(.16,1,.3,1);
}

.work-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .work-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .work {
    padding: 82px 0;
  }

  .work-header,
  .work-grid {
    width: min(100% - 28px, 1480px);
  }

  .work-filter {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 20px;
  }

  .filter-btn {
    flex: 0 0 auto;
  }

  .work-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(310px, auto);
  }

  .work-item,
  .work-item.large,
  .work-item.tall,
  .work-item.wide {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .work-overlay {
    opacity: 1;
  }

  .work-overlay-content,
  .work-arrow {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-item,
  .work-image img,
  .work-overlay,
  .work-overlay-content,
  .work-arrow,
  .work-reveal {
    transition: none !important;
    animation: none !important;
  }

  .work-item,
  .work-reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================
   OUR WORK PHOTO + VIDEO SWIPERS
========================================== */
.work-showcase {
  width: min(100% - 48px, 1480px);
  margin: 0 auto;
  display: grid;
  gap: clamp(44px, 6vw, 78px);
}

.work-slider-block {
  min-width: 0;
}

.work-slider-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.work-slider-heading > span {
  color: #111;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}

.work-controls {
  display: flex;
  gap: 10px;
}

.work-nav {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 16px 38px rgba(17,17,17,.08);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.work-nav:hover {
  transform: translateY(-2px);
  background: #111;
  color: #fff;
}

.work-swiper {
  overflow: visible;
  padding: 8px 0 52px;
}

.work-swiper .swiper-slide {
  width: auto;
  height: auto;
}

.work-media-card {
  width: 100%;
  height: clamp(380px, 42vw, 500px);
  border-radius: 28px;
  overflow: hidden;
  background: #f7f7f7;
  cursor: pointer;
  box-shadow: 0 26px 70px rgba(17,17,17,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform 620ms cubic-bezier(.16,1,.3,1), box-shadow 620ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

.work-media-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 42px 100px rgba(17,17,17,.16), 0 12px 32px rgba(198,169,106,.12);
}

.work-media-card .work-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.work-media-card video,
.work-media-card img,
.work-media-card .work-video-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1200ms cubic-bezier(.16,1,.3,1), filter 1200ms cubic-bezier(.16,1,.3,1), opacity 520ms ease;
}

.work-video-fallback {
  background: linear-gradient(135deg, #ece8df, #f7f7f7);
}

.work-media-card:hover video,
.work-media-card:hover img {
  transform: scale(1.10);
  filter: saturate(1.05) contrast(1.03);
}

.work-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #111;
  font-size: 22px;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 56px rgba(17,17,17,.22);
  z-index: 3;
  transition: transform 520ms cubic-bezier(.16,1,.3,1), background 520ms ease, box-shadow 520ms ease;
}

.work-play i {
  margin-left: 4px;
}

.work-media-card:hover .work-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #111;
  color: #fff;
  box-shadow: 0 28px 64px rgba(17,17,17,.28);
}

.work-media-card .work-overlay-content p {
  max-width: 420px;
  margin: 12px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.7;
}

.work-overlay {
  z-index: 2;
}

.work-duration {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(17,17,17,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.work-filter {
  position: relative;
}

.work-filter-indicator {
  position: absolute;
  top: 8px;
  left: 0;
  height: calc(100% - 16px);
  border-radius: 999px;
  background: linear-gradient(135deg, #f7f3eb, #fff);
  border: 1px solid rgba(198,169,106,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(198,169,106,.12);
  pointer-events: none;
  z-index: 0;
  transition: transform 420ms cubic-bezier(.16,1,.3,1), width 420ms cubic-bezier(.16,1,.3,1);
}

.work-filter .filter-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
}

.work-filter .filter-btn.active {
  color: #111;
  background: transparent;
  box-shadow: none;
}

.work-nav {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(198,169,106,.22);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.work-nav:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

@media (max-width: 680px) {
  .work-swiper .swiper-slide,
  .work-media-card {
    width: min(300px, 86vw);
    height: 400px;
  }

  .work-play {
    width: 72px;
    height: 72px;
    font-size: 18px;
  }
}

.work-swiper .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: rgba(17,17,17,.22);
  opacity: 1;
  transition: width var(--transition), background var(--transition);
}

.work-swiper .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 99px;
  background: var(--gold, #C6A96A);
}

.work-empty {
  width: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 28px;
  color: rgba(17,17,17,.52);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .work-showcase { width: min(100% - 28px, 1480px); }
  .work-slider-heading { align-items: flex-start; }
  .work-nav { width: 44px; height: 44px; }
  .work-media-card { height: 430px; }
}

/* ==========================================
   PREMIUM FULLSCREEN GALLERY + VIDEO VIEWER
========================================== */
html.pv-open,
body.pv-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body.pv-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.pv-viewer {
  --pv-glass: rgba(255, 255, 255, 0.1);
  --pv-glass-border: rgba(255, 255, 255, 0.18);
  --pv-text: rgba(255, 255, 255, 0.92);
  --pv-muted: rgba(255, 255, 255, 0.55);
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--pv-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), visibility 420ms cubic-bezier(.16, 1, .3, 1);
}

.pv-viewer.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pv-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.pv-glass {
  border: 1px solid var(--pv-glass-border);
  background: var(--pv-glass);
  color: #fff;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), background 280ms ease, border-color 280ms ease;
}

.pv-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.pv-close,
.pv-nav,
.pv-icon-btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
}

.pv-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 16px;
}

.pv-prev { left: max(16px, env(safe-area-inset-left)); }
.pv-next { right: max(16px, env(safe-area-inset-right)); }

.pv-icon-btn {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.pv-stage,
.pv-video-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  width: 100%;
  padding: clamp(64px, 8vh, 96px) clamp(64px, 8vw, 110px) 24px;
}

.pv-media-wrap {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: min(78vh, 900px);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: zoom-in;
}

.pv-media-wrap.is-zoomed {
  cursor: grab;
}

.pv-media-wrap.is-dragging {
  cursor: grabbing;
}

.pv-media-wrap img {
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center center;
  transition: opacity 380ms ease, box-shadow 380ms ease;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.pv-media-wrap img.is-ready {
  opacity: 1;
}

.pv-media-wrap img.pv-anim.is-ready,
.pv-video-stage video.pv-anim {
  animation: pvFadeScale 480ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes pvFadeScale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.pv-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  pointer-events: none;
}

.pv-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.pv-loader span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  animation: pvSpin 700ms linear infinite;
}

@keyframes pvSpin {
  to { transform: rotate(360deg); }
}

.pv-chrome,
.pv-video-chrome {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto max(18px, env(safe-area-inset-bottom));
  padding: 16px 18px 18px;
  border-radius: 22px;
  border: 1px solid var(--pv-glass-border);
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.pv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

.pv-meta h3 {
  margin: 0;
  color: #fff;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.pv-meta span {
  color: var(--pv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pv-chrome-actions,
.pv-video-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv-chrome-actions {
  justify-content: space-between;
}

.pv-counter,
.pv-time {
  color: var(--pv-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.pv-zoom {
  display: inline-flex;
  gap: 8px;
}

.pv-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
}

.pv-thumb {
  flex: 0 0 auto;
  width: 58px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease;
}

.pv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pv-thumb:hover,
.pv-thumb.active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

.pv-video-stage video {
  width: min(1180px, 100%);
  max-height: min(72vh, 820px);
  border-radius: 18px;
  background: #000;
  object-fit: contain;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.pv-progress {
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
}

.pv-progress-track {
  position: relative;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.pv-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.78) 100%);
  transition: width 80ms linear;
}

.pv-progress:hover .pv-progress-track {
  height: 5px;
}

.pv-video-bar {
  justify-content: flex-start;
}

.pv-video-bar .pv-counter {
  margin-left: auto;
}

.pv-video-bar .pv-time {
  min-width: 92px;
}

.gallery-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 24px;
  color: rgba(17, 17, 17, 0.45);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .pv-stage,
  .pv-video-stage {
    padding: 72px 18px 18px;
  }

  .pv-nav {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: calc(188px + env(safe-area-inset-bottom));
    transform: none;
  }

  .pv-meta h3 {
    font-size: 20px;
  }

  .pv-thumb {
    width: 50px;
    height: 36px;
  }
}

@media (max-width: 680px) {
  .pv-chrome,
  .pv-video-chrome {
    width: calc(100% - 20px);
    padding: 14px;
    border-radius: 18px;
  }

  .pv-media-wrap img,
  .pv-video-stage video {
    max-height: 58vh;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-viewer,
  .pv-media-wrap img,
  .pv-loader span,
  .pv-thumb {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================
   PHOTOSWIPE + FANCYBOX LUXURY THEME
========================================== */
.pswp {
  --pswp-bg: rgba(8, 8, 8, 0.94);
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: rgba(255, 255, 255, 0.72);
}

.pswp__bg {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.pswp__counter {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pswp__button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), background 280ms ease;
}

.pswp__button:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.pswp__img {
  border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.pswp-luxury-caption {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  padding: 18px 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  text-align: center;
  pointer-events: none;
}

.pswp-luxury-category {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pswp-luxury-caption strong {
  display: block;
  color: #fff;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.1;
}

.pswp-luxury-caption p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.fancybox__container {
  --fancybox-bg: rgba(8, 8, 8, 0.94);
  --fancybox-color: #fff;
  --f-button-width: 52px;
  --f-button-height: 52px;
  --f-button-border-radius: 50%;
  --f-button-bg: rgba(255, 255, 255, 0.08);
  --f-button-hover-bg: rgba(255, 255, 255, 0.16);
  --f-button-color: #fff;
}

.fancybox-luxury .fancybox__backdrop {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.fancybox-luxury .fancybox__html5video,
.fancybox-luxury .fancybox__content video {
  border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  max-height: min(78vh, 900px);
}

.fb-luxury-caption { text-align: center; }

.fb-luxury-category {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fb-luxury-caption strong {
  display: block;
  color: #fff;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
}

.fb-luxury-caption p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.fancybox__caption {
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.work-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, #f3f3f3 8%, #fafafa 18%, #f3f3f3 33%);
  background-size: 200% 100%;
  animation: workShimmer 1.4s linear infinite;
}

.work-media-card.is-loaded .work-skeleton {
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.work-media-card .work-image img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 520ms ease, transform 1200ms cubic-bezier(.16,1,.3,1), filter 1200ms cubic-bezier(.16,1,.3,1);
}

.work-media-card img.is-ready,
.work-media-card.is-loaded img {
  opacity: 1;
}

.work-media-card.is-featured {
  box-shadow: 0 30px 80px rgba(198, 169, 106, 0.22), inset 0 0 0 1px rgba(198, 169, 106, 0.28);
}

.work-featured-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-featured-badge i { color: var(--gold, #C6A96A); }

.work-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes workShimmer {
  to { background-position-x: -200%; }
}

@media (prefers-reduced-motion: reduce) {
  .work-skeleton { animation: none; }
}

/* ==========================================
   WORLD-CLASS LUXURY POLISH
   Apple + Bentley + Studio McGee
========================================== */
:root {
  --champagne: #C6A96A;
  --champagne-soft: #E8D9B8;
  --champagne-deep: #9A7B45;
  --ink: #111111;
  --ink-soft: rgba(17, 17, 17, 0.68);
  --paper: #ffffff;
  --paper-soft: #FAF8F4;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(198, 169, 106, 0.28);
  --ease-luxury: cubic-bezier(.16, 1, .3, 1);
  --section-space: clamp(100px, 12vw, 160px);
}

section {
  padding: var(--section-space) 0;
}

.section-label {
  color: var(--champagne-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--heading, 'Cormorant Garamond', serif);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Navbar */
.luxury-nav {
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 52%, rgba(250,247,240,.84) 100%);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  box-shadow:
    0 30px 90px rgba(17, 17, 17, .10),
    0 10px 28px rgba(198, 169, 106, .08),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.luxury-nav.scrolled {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  border-color: rgba(198, 169, 106, 0.42);
}

.nav-cta { position: relative; }

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--ease-luxury), visibility 520ms var(--ease-luxury);
}

.mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  z-index: 9998;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hero */
.hero {
  min-height: 100svh;
  height: 100svh;
}

.hero-slide {
  opacity: 0;
  z-index: 0;
  transition: opacity 1.1s var(--ease-luxury);
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slide img {
  transform: scale(1.05);
  transition: transform 8s var(--ease-luxury);
}

.hero-slide.active img {
  transform: scale(1.02);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.42) 58%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 36%, rgba(17,17,17,.08) 100%);
}

.hero-overlay--dark,
.hero--dark .hero-overlay {
  background:
    linear-gradient(90deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.58) 38%, rgba(17,17,17,.22) 68%, rgba(17,17,17,.05) 100%),
    linear-gradient(180deg, rgba(17,17,17,.35) 0%, transparent 40%, rgba(17,17,17,.45) 100%);
}

.hero--dark .hero-title,
.hero--dark .hero-subtitle,
.hero--dark .hero-scroll,
.hero--dark .stat-number,
.hero--dark .stat-label {
  color: #fff;
}

.hero--dark .hero-subtitle,
.hero--dark .stat-label {
  color: rgba(255,255,255,.72);
}

.hero--dark .hero-label {
  color: var(--champagne-soft);
  border-color: rgba(198,169,106,.45);
  background: rgba(17,17,17,.35);
}

.hero--dark .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

.hero-stats {
  border: 1px solid rgba(198,169,106,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  transition: transform 620ms var(--ease-luxury), box-shadow 620ms var(--ease-luxury);
}

/* Our Work carousel */
.work {
  background: linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%);
}

.work-showcase {
  gap: clamp(56px, 8vw, 96px);
}

.work-swiper {
  overflow: hidden;
  padding-bottom: 56px;
}

.work-swiper .swiper-slide {
  height: auto;
}

.work-media-card {
  position: relative;
  width: 100%;
  height: clamp(380px, 42vw, 500px);
  border-radius: 28px;
  border: 1px solid rgba(17,17,17,.06);
}

.work-media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.work-slider-heading > span {
  font-size: clamp(30px, 3.5vw, 48px);
  letter-spacing: -0.01em;
}

.work-filter {
  border-color: rgba(198,169,106,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 60px rgba(17,17,17,.06), inset 0 1px 0 rgba(255,255,255,.95);
}

/* Services, Gallery, Contact polish */
.gallery,
.testimonials,
.contact {
  background: #fff;
}

.gallery-item,
.testimonial-item,
.contact-form-wrapper {
  border-radius: 28px;
  transition: transform 620ms var(--ease-luxury), box-shadow 620ms var(--ease-luxury);
}

.gallery-item {
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

.gallery-item img {
  transition: transform 1.2s var(--ease-luxury);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.contact-form-wrapper {
  border: 1px solid rgba(198,169,106,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,247,240,.72));
  box-shadow: 0 30px 80px rgba(17,17,17,.08);
}

.form-submit,
.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 16px;
}

.form-submit {
  background: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  transition: transform 420ms var(--ease-luxury), background 420ms var(--ease-luxury), box-shadow 420ms var(--ease-luxury);
}

.form-submit:hover {
  background: var(--champagne);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(198,169,106,.28);
}

.footer {
  background: var(--ink);
  color: rgba(255,255,255,.72);
}

.footer a:hover {
  color: var(--champagne);
}

@media (max-width: 1199px) {
  .work-media-card {
    height: clamp(360px, 48vw, 440px);
  }
}

@media (max-width: 767px) {
  .luxury-nav {
    width: calc(100% - 20px);
  }

  .work-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-media-card {
    height: 400px;
  }

  .hero {
    height: auto;
    min-height: 100svh;
  }
}

/* ==========================================
   PREMIUM WHAT WE DO / SERVICES
========================================== */
.services {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f4 52%, #ffffff 100%);
}

.services-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.services-blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.services-blur--one {
  width: 420px;
  height: 420px;
  top: -120px;
  right: -80px;
  background: rgba(198, 169, 106, 0.18);
}

.services-blur--two {
  width: 360px;
  height: 360px;
  bottom: 10%;
  left: -100px;
  background: rgba(17, 17, 17, 0.05);
}

.services-blur--three {
  width: 280px;
  height: 280px;
  top: 42%;
  right: 18%;
  background: rgba(198, 169, 106, 0.10);
}

.services-container {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1480px);
  margin: 0 auto;
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.services-intro {
  position: sticky;
  top: 120px;
}

.services-intro .section-title {
  margin: 0 0 22px;
  font-size: clamp(46px, 5.5vw, 82px);
  line-height: 0.94;
}

.services-intro .section-title em {
  color: var(--champagne, #C6A96A);
  font-style: italic;
  font-weight: 500;
}

.services-subtitle {
  max-width: 380px;
  margin: 0 0 28px;
  color: rgba(17, 17, 17, 0.62);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
}

.services-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.services-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(198, 169, 106, 0.28);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(17, 17, 17, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.05);
}

.services-badge strong {
  color: #111;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.services-cta {
  min-height: 58px;
  padding-inline: 28px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  padding: clamp(24px, 2.4vw, 30px);
  border-radius: 28px;
  border: 1px solid rgba(198, 169, 106, 0.18);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 22px 56px rgba(17, 17, 17, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), box-shadow 620ms cubic-bezier(.16, 1, .3, 1), border-color 620ms ease;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--champagne, #C6A96A), transparent);
  opacity: 0;
  transition: opacity 420ms ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(198, 169, 106, 0.38);
  box-shadow:
    0 32px 72px rgba(17, 17, 17, 0.11),
    0 12px 28px rgba(198, 169, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(198, 169, 106, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 247, 240, 0.88));
  color: var(--champagne-deep, #9A7B45);
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(198, 169, 106, 0.12);
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1), background 520ms ease, color 520ms ease;
}

.service-card:hover .service-card-icon {
  transform: translateY(-2px) scale(1.04);
  background: #111;
  color: var(--champagne, #C6A96A);
  border-color: #111;
}

.service-card h3 {
  margin: 0;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: #111;
}

.service-card p {
  margin: 0;
  color: rgba(17, 17, 17, 0.62);
  font-size: 14px;
  line-height: 1.75;
}

.service-card-line {
  margin-top: auto;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne, #C6A96A), transparent);
  transition: width 520ms cubic-bezier(.16, 1, .3, 1);
}

.service-card:hover .service-card-line {
  width: 72px;
}

.services-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.services-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.services-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: rgba(17, 17, 17, 0.5);
  border: 1px dashed rgba(17, 17, 17, 0.12);
  border-radius: 24px;
}

@media (max-width: 1180px) {
  .services-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .services-intro {
    position: static;
    max-width: 680px;
  }

  .services-subtitle {
    max-width: 100%;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .services-container {
    width: min(100% - 28px, 1480px);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-cta {
    width: 100%;
  }

  .services-badges {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card-icon,
  .service-card-line,
  .services-reveal {
    transition: none !important;
  }

  .services-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================
   FEATURED PROJECTS — LUXURY GRID
========================================== */
.featured-projects {
  position: relative;
  padding: clamp(88px, 12vw, 148px) 0 clamp(96px, 11vw, 132px);
  background: linear-gradient(180deg, #fff 0%, #faf9f7 48%, #fff 100%);
  overflow: hidden;
}

.featured-divider {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.featured-divider span {
  display: block;
  width: min(180px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne, #C6A96A), transparent);
  opacity: 0.85;
}

.featured-container {
  width: min(100% - clamp(28px, 5vw, 80px), 1480px);
  margin: 0 auto;
}

.featured-header {
  max-width: 760px;
  margin: 0 auto clamp(52px, 7vw, 88px);
  text-align: center;
}

.featured-intro .section-title {
  margin: 12px 0 22px;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.featured-intro .section-title em {
  font-style: italic;
  color: var(--champagne-deep, #9A7B45);
}

.featured-subtitle {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(17, 17, 17, 0.58);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.78;
  font-weight: 400;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.featured-card {
  min-width: 0;
}

.featured-card-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 28px;
  -webkit-tap-highlight-color: transparent;
}

.featured-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: #f3f1ed;
  box-shadow:
    0 2px 4px rgba(17, 17, 17, 0.03),
    0 18px 48px rgba(17, 17, 17, 0.07);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), box-shadow 620ms cubic-bezier(.16, 1, .3, 1);
}

.featured-card-btn:hover .featured-card-media,
.featured-card-btn:focus-visible .featured-card-media {
  transform: translateY(-6px);
  box-shadow:
    0 8px 20px rgba(17, 17, 17, 0.06),
    0 28px 72px rgba(17, 17, 17, 0.12);
}

.featured-card-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #f0ede8 8%, #faf8f5 18%, #f0ede8 33%);
  background-size: 200% 100%;
  animation: featuredShimmer 1.4s ease-in-out infinite;
  z-index: 1;
  transition: opacity 420ms ease;
}

.featured-card-media.is-loaded .featured-card-skeleton {
  opacity: 0;
  pointer-events: none;
}

@keyframes featuredShimmer {
  to { background-position-x: -200%; }
}

.featured-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), opacity 520ms ease;
  opacity: 0;
  z-index: 2;
}

.featured-card-media img.is-ready {
  opacity: 1;
}

.featured-card-btn:hover img,
.featured-card-btn:focus-visible img {
  transform: scale(1.08);
}

.featured-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0) 32%, rgba(8, 8, 8, 0.72) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.featured-card-btn:hover .featured-card-overlay,
.featured-card-btn:focus-visible .featured-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

.featured-card-category {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.featured-card-overlay h3 {
  margin: 0;
  color: #fff;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.featured-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--champagne-soft, #E8D9B8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.featured-card-cta i {
  font-size: 10px;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.featured-card-btn:hover .featured-card-cta i,
.featured-card-btn:focus-visible .featured-card-cta i {
  transform: translateX(4px);
}

.featured-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 72px);
}

.featured-view-all {
  min-width: min(100%, 280px);
}

.featured-empty {
  grid-column: 1 / -1;
  padding: 72px 24px;
  border-radius: 28px;
  border: 1px dashed rgba(17, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 17, 17, 0.52);
  text-align: center;
  font-size: 15px;
}

.featured-reveal {
  opacity: 0;
  transform: translateY(36px);
}

.featured-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .featured-card-media {
    aspect-ratio: 5 / 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-card-media,
  .featured-card-media img,
  .featured-card-overlay,
  .featured-card-cta i,
  .featured-card-skeleton,
  .featured-reveal {
    transition: none !important;
    animation: none !important;
  }

  .featured-reveal {
    opacity: 1;
    transform: none;
  }

  .featured-card-overlay {
    opacity: 1;
    transform: none;
  }
}

/* PhotoSwipe thumbnail strip */
.pswp-thumbs-track {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 32px), 720px);
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pswp-thumbs-track::-webkit-scrollbar {
  display: none;
}

.pswp-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 280ms ease, border-color 280ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.pswp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pswp-thumb:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.pswp-thumb.active {
  opacity: 1;
  border-color: var(--champagne, #C6A96A);
  box-shadow: 0 8px 24px rgba(198, 169, 106, 0.28);
}

.pswp-luxury-caption {
  bottom: max(108px, calc(env(safe-area-inset-bottom) + 88px));
}

@media (max-width: 680px) {
  .pswp-thumbs-track {
    width: calc(100% - 20px);
    gap: 8px;
    padding: 8px 10px;
  }

  .pswp-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .pswp-luxury-caption {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 76px));
    width: calc(100% - 20px);
    padding: 14px 16px;
  }
}

/* ==========================================
   BUILD WITH US — CONSULTATION SECTION
========================================== */
.build-with-us {
  position: relative;
  padding: clamp(88px, 11vw, 140px) 0;
  background: linear-gradient(180deg, #fff 0%, #faf9f7 55%, #fff 100%);
  overflow: hidden;
}

.build-divider {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.build-divider span {
  width: min(180px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne, #C6A96A), transparent);
}

.build-container {
  width: min(100% - clamp(28px, 5vw, 80px), 1480px);
  margin: 0 auto;
}

.build-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.build-info .section-title {
  margin: 12px 0 20px;
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 0.98;
}

.build-info .section-title em {
  font-style: italic;
  color: var(--champagne-deep, #9A7B45);
}

.build-description {
  margin: 0 0 28px;
  max-width: 520px;
  color: rgba(17, 17, 17, 0.58);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
}

.build-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.build-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(17, 17, 17, 0.78);
  font-size: 15px;
  font-weight: 500;
}

.build-features i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(198, 169, 106, 0.14);
  color: var(--champagne-deep, #9A7B45);
  font-size: 11px;
}

.build-contact-list {
  display: grid;
  gap: 14px;
}

.build-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  color: inherit;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms ease, border-color 420ms ease;
}

a.build-contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(198, 169, 106, 0.35);
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08);
}

.build-contact-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(198, 169, 106, 0.18), rgba(255, 255, 255, 0.9));
  color: var(--champagne-deep, #9A7B45);
  font-size: 16px;
  flex-shrink: 0;
}

.build-contact-text {
  display: grid;
  gap: 2px;
}

.build-contact-text small {
  color: rgba(17, 17, 17, 0.48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.build-contact-text strong {
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.build-form-panel {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 2px 4px rgba(17, 17, 17, 0.03),
    0 24px 64px rgba(17, 17, 17, 0.08);
}

.build-form-header h3 {
  margin: 0 0 8px;
  font-family: var(--heading, 'Cormorant Garamond', serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.1;
}

.build-form-header p {
  margin: 0 0 24px;
  color: rgba(17, 17, 17, 0.55);
  font-size: 14px;
  line-height: 1.65;
}

.build-form {
  display: grid;
  gap: 18px;
}

.build-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.build-field {
  display: grid;
  gap: 8px;
}

.build-field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
}

.build-field label span {
  color: var(--champagne-deep, #9A7B45);
}

.build-field input,
.build-field select,
.build-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font: inherit;
  font-size: 14px;
  transition: border-color 280ms ease, box-shadow 280ms ease;
}

.build-field input:focus,
.build-field select:focus,
.build-field textarea:focus {
  outline: none;
  border-color: rgba(198, 169, 106, 0.55);
  box-shadow: 0 0 0 4px rgba(198, 169, 106, 0.12);
}

.build-field.has-error input,
.build-field.has-error select,
.build-field.has-error textarea {
  border-color: #c44;
}

.build-field-error {
  min-height: 16px;
  color: #c44;
  font-size: 12px;
}

.build-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.build-submit {
  position: relative;
  min-height: 58px;
}

.build-submit.is-loading .build-submit-text {
  opacity: 0;
}

.build-submit-loader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  opacity: 0;
  animation: none;
}

.build-submit.is-loading .build-submit-loader {
  opacity: 1;
  animation: buildSpin 720ms linear infinite;
}

@keyframes buildSpin {
  to { transform: rotate(360deg); }
}

.build-whatsapp i {
  font-size: 16px;
}

.build-reveal {
  opacity: 0;
  transform: translateY(36px);
}

.build-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Site toast */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 120%);
  z-index: 9999;
  min-width: min(92vw, 420px);
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.14);
  color: #111;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 520ms ease;
  opacity: 0;
  pointer-events: none;
}

.site-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.site-toast.is-success {
  border-color: rgba(34, 120, 74, 0.22);
}

.site-toast.is-error {
  border-color: rgba(196, 68, 68, 0.28);
  color: #8f2f2f;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #111;
  box-shadow: 0 12px 36px rgba(17, 17, 17, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1), visibility 420ms ease, background 280ms ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #111;
  color: #fff;
  transform: translateY(-3px);
}

/* ==========================================
   FLOATING CALL + SOCIAL
========================================== */
.floating-call {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 9500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.28);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), background 280ms ease, box-shadow 280ms ease;
}

.floating-call-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(198, 169, 106, 0.35), transparent 65%);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

.floating-call i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--champagne, #C6A96A);
  font-size: 14px;
}

.floating-call:hover {
  transform: translateY(calc(-50% - 4px));
  background: rgba(17, 17, 17, 0.88);
  box-shadow: 0 24px 56px rgba(17, 17, 17, 0.36);
}

.floating-social {
  position: fixed;
  right: max(28px, env(safe-area-inset-right));
  top: calc(50% + 72px);
  transform: translateY(-50%);
  z-index: 9490;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-social a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #111;
  box-shadow: 0 14px 32px rgba(17, 17, 17, 0.1);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), background 280ms ease, color 280ms ease;
}

.floating-social a:hover {
  transform: translateY(-2px) scale(1.04);
  background: #111;
  color: #fff;
}

@media (max-width: 900px) {
  .floating-call {
    top: auto;
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
    transform: none;
    padding: 0;
    width: 58px;
    height: 58px;
    justify-content: center;
  }

  .floating-call:hover {
    transform: translateY(-3px);
  }

  .floating-call-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .floating-call i {
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 18px;
  }

  .floating-social {
    top: auto;
    bottom: calc(92px + env(safe-area-inset-bottom));
    right: max(22px, env(safe-area-inset-right));
    transform: none;
  }

  .back-to-top {
    bottom: calc(96px + env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
  }
}

/* Client Stories removed — neutralize leftover selectors */
.testimonials,
.testimonial-item,
.testimonial-nav,
.testimonials-container,
.testimonials-slider {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==========================================
   PREMIUM SITE FOOTER
========================================== */
.site-footer {
  position: relative;
  padding: clamp(48px, 5vw, 68px) 0 24px;
  background: #0d0d0d;
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.footer-gradient {
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  background: linear-gradient(180deg, rgba(198, 169, 106, 0.12), transparent);
  pointer-events: none;
}

.site-footer .footer-container {
  position: relative;
  z-index: 1;
  width: min(100% - clamp(28px, 5vw, 80px), 1480px);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
}

.footer-company p {
  margin: 18px 0 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
}

.footer-logo img {
  height: 42px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-col h4 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-col a,
.footer-col span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  text-decoration: none;
  transition: color 280ms ease, transform 280ms ease;
}

.footer-col a:hover {
  color: var(--champagne-soft, #E8D9B8);
}

.footer-contact-list i {
  width: 18px;
  margin-right: 8px;
  color: var(--champagne, #C6A96A);
}

.footer-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-map-btn:hover {
  background: rgba(198, 169, 106, 0.18);
  border-color: rgba(198, 169, 106, 0.45);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), background 280ms ease, border-color 280ms ease;
}

.footer-social a:hover {
  transform: translateY(-3px);
  background: rgba(198, 169, 106, 0.2);
  border-color: rgba(198, 169, 106, 0.45);
  color: #fff;
}

.footer-divider {
  display: flex;
  justify-content: center;
  margin: 28px 0 18px;
}

.footer-divider span {
  width: min(220px, 50vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 169, 106, 0.55), transparent);
}

.site-footer .footer-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding-top: 0;
  margin: 0;
}

.site-footer .footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.footer-credit {
  text-align: center;
}

.footer-legal {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--champagne-soft, #E8D9B8);
}

@media (max-width: 1180px) {
  .build-layout {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-company {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .build-form-row,
  .build-form-actions {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-bottom {
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }

  .footer-legal {
    justify-content: center;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-contact-item,
  .build-field input,
  .build-field select,
  .build-field textarea,
  .build-reveal,
  .back-to-top,
  .footer-social a,
  .site-toast {
    transition: none !important;
    animation: none !important;
  }

  .build-reveal {
    opacity: 1;
    transform: none;
  }
}