/* LUXE UPGRADE — attractiveness layer */
::selection{background:#C19A4B;color:#fff}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:#F3EEE3}::-webkit-scrollbar-thumb{background:linear-gradient(#D9B968,#9A7730);border-radius:10px;border:2px solid #F3EEE3}
/* preloader */
#preloader{position:fixed;inset:0;z-index:9999;background:#14110C;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;transition:opacity .7s,visibility .7s}
#preloader.hide{opacity:0;visibility:hidden}
.pre-logo{width:110px;height:110px;object-fit:contain;animation:pulseGlow 1.6s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(193,154,75,.45))}
header.site.scrolled .brand-logo-text{filter:invert(1)}
.pre-mark{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9B0,#C19A4B 58%,#6E571E);display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:46px;color:#fff;animation:pulseGlow 1.6s ease-in-out infinite;position:relative}
.pre-mark::after{content:'';position:absolute;inset:-10px;border:1px solid rgba(230,200,122,.4);border-radius:50%;animation:spinRing 2.4s linear infinite;border-top-color:#E6C87A}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(193,154,75,.5)}50%{box-shadow:0 0 60px 10px rgba(193,154,75,.45)}}
@keyframes spinRing{to{transform:rotate(360deg)}}
.pre-text{color:#EDE3C8;letter-spacing:.5em;font-size:11px;text-transform:uppercase;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.4}}
/* light orbs + grain */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
.orb-gold{background:radial-gradient(circle,rgba(230,200,122,.55),transparent 70%);width:480px;height:480px;animation:drift 10s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(60px,-40px) scale(1.15)}}
.grain::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
/* hero upgrades */
.hero-bg img{animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.14)}}
.hero-beam{position:absolute;top:-20%;left:12%;width:220px;height:130%;background:linear-gradient(180deg,rgba(255,236,180,.22),transparent 70%);transform:rotate(18deg);filter:blur(18px);z-index:1;pointer-events:none;animation:beam 5s ease-in-out infinite alternate}
.hero-beam.b2{left:auto;right:18%;animation-delay:1.4s;width:160px}
@keyframes beam{to{opacity:.4;transform:rotate(22deg) translateX(30px)}}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.2s infinite}
@keyframes shine{0%{left:-80%}60%,100%{left:130%}}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-collage img{border-radius:16px;object-fit:cover;width:100%}
.hero-collage img:first-child{height:300px}.hero-collage img:last-child{height:300px;margin-top:34px}
.float-badge{position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid #E7DDC6;border-radius:16px;padding:12px 18px;box-shadow:0 18px 40px rgba(0,0,0,.18);display:flex;gap:12px;align-items:center;animation:floaty 4s ease-in-out infinite;z-index:3}
@keyframes floaty{50%{transform:translateY(-12px)}}
/* gold divider */
.gold-div{display:flex;align-items:center;gap:14px;justify-content:center;margin:0 auto}
.gold-div::before,.gold-div::after{content:'';height:1px;width:120px;background:linear-gradient(90deg,transparent,#C19A4B)}
.gold-div::after{background:linear-gradient(90deg,#C19A4B,transparent)}
.gold-div span{color:#C19A4B;letter-spacing:.4em;font-size:12px}
/* card shine + tilt */
.card,.pcard,.audi{overflow:hidden}
.card::after,.pcard::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:.6s;pointer-events:none}
.card:hover::after,.pcard:hover::after{left:130%}
.tilt{transform-style:preserve-3d;will-change:transform}
/* logos */
.logo-marquee{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden}
.logo-track{display:flex;gap:56px;width:max-content;animation:marq 22s linear infinite;align-items:center}
.logo-track span{font-family:var(--serif);font-size:24px;letter-spacing:.18em;color:#B9AE94;white-space:nowrap}
.logo-track span b{color:var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}
/* bento */
.bento{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:280px 280px;gap:18px}
.bento>div{border-radius:22px;overflow:hidden;position:relative}
.bento img{width:100%;height:100%;object-fit:cover;transition:.8s}
.bento>div:hover img{transform:scale(1.08)}
.bento .big{grid-row:span 2}
.bento-label{position:absolute;left:18px;bottom:18px;background:rgba(20,17,12,.72);backdrop-filter:blur(10px);color:#F5EEDD;padding:10px 18px;border-radius:100px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(230,200,122,.35)}
/* testimonials */
.testi-wrap{position:relative;background:linear-gradient(135deg,#fff,#F7EDD4);border:1px solid var(--line);border-radius:28px;padding:56px;overflow:hidden}
.testi-slide{display:none;animation:fadeUp .6s ease}
.testi-slide.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
.testi-slide p{font-family:var(--serif);font-size:clamp(22px,2.5vw,32px);line-height:1.4}
.testi-nav{display:flex;gap:10px;margin-top:26px;align-items:center}
.testi-dot{width:38px;height:5px;border-radius:10px;background:#E2D5B4;cursor:pointer;transition:.3s;border:0}
.testi-dot.active{background:var(--gold);width:56px}
/* before after */
.ba{position:relative;border-radius:22px;overflow:hidden;height:460px;user-select:none;border:1px solid var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after-clip{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#E6C87A;z-index:3}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:100px;padding:10px 20px;font-size:12px;letter-spacing:.2em;box-shadow:0 10px 30px rgba(0,0,0,.3);white-space:nowrap}
.ba input{position:absolute;inset:0;opacity:0;cursor:ew-resize;z-index:4;width:100%}
/* cta banner */
.cta-banner{position:relative;border-radius:30px;overflow:hidden;padding:80px 60px;color:#fff;text-align:center;isolation:isolate}
.cta-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,.72),rgba(15,12,8,.55));z-index:-1}
.cta-banner h2{color:#fff;font-size:clamp(36px,4.5vw,60px)}
/* insta strip */
.insta{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.insta img{height:200px;width:100%;object-fit:cover;border-radius:16px;transition:.5s;cursor:pointer}
.insta img:hover{transform:scale(1.04) rotate(1deg);box-shadow:var(--shadow)}
/* back to top */
#toTop{position:fixed;left:20px;bottom:20px;z-index:200;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#E6C87A;border:1px solid rgba(230,200,122,.4);cursor:pointer;display:none;font-size:20px}
#toTop.show{display:block}
/* counter pop */
.stat b{font-variant-numeric:tabular-nums}
/* header luxe */
header.site{border-top:3px solid transparent;border-image:linear-gradient(90deg,#9A7730,#E6C87A,#9A7730) 1}
.links a{position:relative}
.nav-cta-glow{box-shadow:0 0 0 0 rgba(193,154,75,.5);animation:ctaPulse 2.4s infinite}
@keyframes ctaPulse{70%{box-shadow:0 0 0 14px rgba(193,154,75,0)}100%{box-shadow:0 0 0 0 rgba(193,154,75,0)}}
@media(max-width:1020px){.bento{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px 220px}.insta{grid-template-columns:repeat(3,1fr)}.testi-wrap,.cta-banner{padding:36px 24px}}
@media(max-width:620px){.bento{grid-template-columns:1fr;grid-template-rows:repeat(4,240px)}.bento .big{grid-row:span 1}.insta{grid-template-columns:1fr 1fr}.hero-collage{grid-template-columns:1fr}.hero-collage img:last-child{margin-top:0;height:220px}}

/* ===== FULLSCREEN KEN BURNS SLIDESHOW + TRANSPARENT HEADER ===== */
.topbar{position:relative;z-index:120}
header.site{position:fixed;top:0;left:0;right:0;z-index:110;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);border-top:0;transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}
header.site .nav{padding:20px 28px;transition:padding .45s ease}
header.site .brand h4{color:#fff;transition:color .45s}
header.site .brand small{color:#E6C87A}
header.site .links a{color:rgba(255,255,255,.88);transition:color .35s}
header.site .links a.active,header.site .links a:hover{color:#E6C87A}
header.site .hamburger{color:#fff}
header.site.scrolled{background:rgba(251,249,245,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);border-top:3px solid transparent;border-image:linear-gradient(90deg,#9A7730,#E6C87A,#9A7730) 1}
header.site.scrolled .nav{padding:14px 28px}
header.site.scrolled .brand h4{color:var(--ink)}
header.site.scrolled .links a{color:#2E2A23}
header.site.scrolled .links a.active{color:var(--gold-dark)}
header.site.scrolled .hamburger{color:var(--ink)}
/* keep topbar visible above fixed header: push header below topbar, then hide topbar offset on scroll */
body{padding-top:0}
.topbar{position:fixed;top:0;left:0;right:0;z-index:115;transition:transform .45s ease}
header.site{top:36px}
body.header-solid .topbar{transform:translateY(-100%)}
body.header-solid header.site{top:0}
/* HERO fullscreen */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;border-radius:0;padding-top:120px;padding-bottom:70px}
.hero-slideshow{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;will-change:opacity}
.hero-slide.active{opacity:1;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.hero-slide.active img{animation:kbZoom 7.5s ease-out forwards}
@keyframes kbZoom{0%{transform:scale(1.14) translate(0,0)}100%{transform:scale(1.02) translate(-1.5%,1%)}}
.hero-slide.alt.active img{animation-name:kbZoomAlt}
@keyframes kbZoomAlt{0%{transform:scale(1.02) translate(1.5%,-1%)}100%{transform:scale(1.16) translate(0,0)}}
.hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(12,10,7,.88) 20%,rgba(12,10,7,.55) 55%,rgba(12,10,7,.18)),linear-gradient(0deg,rgba(12,10,7,.72) 0%,transparent 45%,rgba(12,10,7,.25) 100%)}
.hero-inner{padding-top:60px;padding-bottom:40px}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:5;display:flex;gap:10px;align-items:center}
.hero-dots button{width:44px;height:4px;border-radius:10px;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:.35s;position:relative;overflow:hidden}
.hero-dots button.active{background:rgba(255,255,255,.35)}
.hero-dots button.active::after{content:'';position:absolute;inset:0;background:#E6C87A;animation:dotFill 6s linear forwards}
@keyframes dotFill{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.hero-count{position:absolute;right:34px;bottom:20px;z-index:5;color:rgba(255,255,255,.75);font-size:12px;letter-spacing:.3em}
.hero-scroll{position:absolute;left:34px;bottom:20px;z-index:5;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.hero-scroll::after{content:'';width:1px;height:44px;background:linear-gradient(#E6C87A,transparent);display:block;animation:scrollHint 1.8s ease-in-out infinite}
@keyframes scrollHint{50%{transform:translateY(8px);opacity:.4}}
/* inner pages: offset for fixed header */
.page-hero{border-radius:0;min-height:62vh;display:flex;align-items:flex-end;padding-top:150px}
/* mobile dropdown stays readable over transparent header */
@media(max-width:1020px){
  header.site .links{background:#fff;border:1px solid var(--line);border-radius:0 0 18px 18px}
  header.site .links a{color:#2E2A23}
}

/* ===== SITE GALLERY (projects.html only, isolated) ===== */
.gal-sec{background:linear-gradient(180deg,#fff,#F7F0DD 60%,#fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gal-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px 0 30px}
.gal-filters button{padding:11px 22px;border-radius:100px;border:1px solid var(--line);background:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.3s}
.gal-filters button.active,.gal-filters button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.gal-grid{columns:3;column-gap:16px}
.gal-item{position:relative;display:block;width:100%;margin:0 0 16px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;cursor:zoom-in;break-inside:avoid;padding:0}
.gal-item img,.gal-item video{width:100%;display:block;object-fit:cover;transition:transform .7s ease}
.gal-item img{height:auto;min-height:200px;max-height:420px}
.gal-item video{max-height:420px;background:#000}
.gal-item:hover img{transform:scale(1.05)}
.gal-item .gal-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.gal-item .gal-play span{width:62px;height:62px;border-radius:50%;background:rgba(20,17,12,.65);backdrop-filter:blur(6px);border:1px solid rgba(230,200,122,.6);color:#E6C87A;font-size:22px;display:grid;place-items:center}
.gal-item .gal-cap{position:absolute;left:12px;bottom:12px;background:rgba(20,17,12,.72);backdrop-filter:blur(8px);color:#F5EEDD;padding:7px 15px;border-radius:100px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(230,200,122,.35)}
.gal-item.hide{display:none}
.gal-note{text-align:center;color:#7A7264;font-size:14px;margin-top:22px}
.gal-lightbox{position:fixed;inset:0;z-index:9990;background:rgba(12,10,7,.92);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:26px}
.gal-lightbox.open{display:flex}
.gal-lightbox .gal-stage{max-width:min(1020px,94vw);max-height:78vh;display:grid;place-items:center}
.gal-lightbox img,.gal-lightbox video{max-width:min(1020px,94vw);max-height:78vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gal-lightbox .gal-bar{display:flex;gap:12px;align-items:center;color:#EDE3C8;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.gal-lightbox .gal-bar button{background:rgba(255,255,255,.1);border:1px solid rgba(230,200,122,.4);color:#E6C87A;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:18px;transition:.3s}
.gal-lightbox .gal-bar button:hover{background:var(--gold);color:#fff}
@media(max-width:1020px){.gal-grid{columns:2}}
.gal-item.capped{display:none}
.gal-more-wrap{text-align:center;margin-top:26px}
#galMore{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:100px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;border:1px solid transparent;background:linear-gradient(135deg,#D9B968,#C19A4B 60%,#A37F2E);color:#fff;box-shadow:0 14px 30px rgba(193,154,75,.35);font-family:var(--sans)}
@media(max-width:620px){.gal-grid{columns:1}.gal-item img{max-height:340px}}
.page-hero .container{padding-top:40px;padding-bottom:56px;width:100%}
@media(max-width:1020px){
  header.site{top:0}
  .topbar{display:none}
  .hero{padding-top:110px}
  .hero-count,.hero-scroll{display:none}
  .page-hero{padding-top:110px;min-height:52vh}
}

/* ===== CREATIVE QUOTE — applies everywhere .quote is used ===== */
.quote{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(900px 420px at 12% -10%,rgba(230,200,122,.22),transparent 60%),radial-gradient(700px 380px at 95% 110%,rgba(193,154,75,.20),transparent 60%),linear-gradient(135deg,#171310,#2C2517 60%,#1A1510);
  border:1px solid rgba(230,200,122,.35);
  box-shadow:0 34px 90px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.08);
  animation:quoteGlow 7s ease-in-out infinite alternate}
@keyframes quoteGlow{to{box-shadow:0 34px 100px rgba(0,0,0,.45),0 0 70px rgba(193,154,75,.16),inset 0 1px 0 rgba(255,255,255,.08)}}
.quote::before{content:'\201C';position:absolute;top:-46px;left:18px;z-index:0;font-family:var(--serif);font-size:300px;line-height:1;
  background:linear-gradient(180deg,rgba(246,227,166,.34),rgba(193,154,75,.05));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.quote::after{content:'';position:absolute;inset:14px;border:1px solid rgba(230,200,122,.30);border-radius:20px;pointer-events:none;z-index:3}
.quote>div:first-child{position:relative;z-index:2}
.quote .eyebrow{color:#E6C87A}
.quote blockquote{position:relative;z-index:2;text-wrap:pretty}
.quote blockquote::first-letter{font-size:1.5em;color:#E6C87A;padding-right:2px}
.quote blockquote::after{content:'';display:block;width:88px;height:3px;margin-top:22px;border-radius:10px;
  background:linear-gradient(90deg,#E6C87A,#9A7730,transparent);box-shadow:0 0 18px rgba(230,200,122,.55)}
.quote p{position:relative;z-index:2}
.quote img{position:relative;z-index:2;border-radius:18px;height:360px;width:100%;object-fit:cover;
  border:1px solid rgba(230,200,122,.45);outline:1px solid rgba(255,255,255,.12);outline-offset:8px;
  box-shadow:0 26px 60px rgba(0,0,0,.5);transform:rotate(1.2deg);transition:transform .6s ease,box-shadow .6s ease}
.quote:hover img{transform:rotate(0deg) scale(1.015);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(193,154,75,.25)}
@media(max-width:1020px){
  .quote::before{font-size:190px;top:-30px}
  .quote img{height:280px;transform:none}
}