/* ==========================================================================
   Limited Edition Motorcars — lemotorcars.ae
   Single stylesheet. Change the tokens in :root to re-skin the whole site.
   ========================================================================== */

:root{
  /* --- brand tokens: edit these to re-skin --- */
  --ink:        #0B0B0C;   /* page background            */
  --panel:      #141416;   /* cards, header              */
  --panel-2:    #1B1B1E;   /* inputs, hovers             */
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.06);
  --text:       #F3F3F1;
  --muted:      #9B9BA1;
  --accent:     #C8A45C;   /* champagne gold             */
  --accent-2:   #E4C888;
  --danger:     #D9453C;
  --ok:         #3FA66A;

  --radius:     4px;
  --radius-lg:  6px;
  --shadow:     0 18px 50px rgba(0,0,0,.55);
  --maxw:       1280px;
  --gut:        clamp(18px, 4vw, 44px);

  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-disp: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--f-disp); font-weight:700; line-height:1.08; letter-spacing:-.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- eyebrow / small caps label ------------------------------------------ */
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:80px}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:#000; border-bottom:1px solid var(--line-2);
  font-size:12.5px; color:var(--muted); letter-spacing:.04em;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:38px; gap:20px}
.topbar a:hover{color:var(--accent)}
.topbar .tb-right{display:flex; gap:22px; align-items:center}
@media (max-width:760px){ .topbar .tb-left{display:none} .topbar .wrap{justify-content:center} }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,12,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px}

.logo{display:inline-flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto}
.logo img{width:auto; display:block}
.logo-header img{height:52px}
.logo-footer img{height:60px}
.logo .mark{
  width:46px; height:46px; border:1px solid var(--accent);
  display:grid; place-items:center; color:var(--accent);
  font-weight:800; font-size:13px; letter-spacing:.06em;
}
.logo-city{
  font-size:9.5px; letter-spacing:.44em; text-transform:uppercase; color:var(--muted);
  font-weight:600; line-height:1; text-indent:.44em;
}
.logo-footer .logo-city{font-size:10.5px; color:var(--accent)}
.logo:hover .logo-city{color:var(--accent)}
@media (max-width:520px){ .logo-header img{height:38px} .logo-city{font-size:8.5px; letter-spacing:.34em; text-indent:.34em} }

.nav{display:flex; align-items:center; gap:30px}
.nav a{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--muted); padding:6px 0; position:relative; transition:color .18s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .25s ease;
}
.nav a:hover, .nav a.is-active{color:var(--text)}
.nav a:hover::after, .nav a.is-active::after{right:0}

.hdr-cta{display:flex; align-items:center; gap:14px}
.flag-badge{
  display:inline-flex; width:42px; height:21px; flex:0 0 auto; overflow:hidden;
  border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.5);
}
.flag-badge svg{width:100%; height:100%; display:block}
@media (prefers-reduced-motion:reduce){ .flag-badge animate, .flag-badge animateTransform{display:none} }
@media (max-width:520px){ .flag-badge{width:34px; height:17px} }
.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:1px solid var(--line);
  color:var(--text); cursor:pointer; align-items:center; justify-content:center;
  border-radius:var(--radius); flex:0 0 auto; padding:0;
}
.nav-toggle svg{width:22px; height:22px; display:block; stroke-width:2}
.nav-toggle:active{border-color:var(--accent); color:var(--accent)}
@media (max-width:1040px){
  .nav{
    position:fixed; inset:112px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px; display:none; box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:15px 0; border-bottom:1px solid var(--line-2); font-size:14px}
  .nav a::after{display:none}
  .nav-toggle{display:flex}
  .hdr-cta .btn{display:none}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border:1px solid var(--accent); background:var(--accent); color:#100D06;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; transition:.2s; border-radius:var(--radius); white-space:nowrap;
}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent); background:transparent}
.btn.gold-outline{background:transparent; color:var(--accent)}
.btn.gold-outline:hover{background:var(--accent); color:#100D06}
.btn.wa{background:#25D366; border-color:#25D366; color:#04270F}
.btn.wa:hover{background:#31e874; border-color:#31e874}
.btn.sm{padding:10px 18px; font-size:11px}
.btn.block{width:100%}
.btn svg{width:15px; height:15px}

/* ==========================================================================
   Hero — copy on the left, the photograph in its own column on the right
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(68vh,565px);
  background:
    radial-gradient(120% 80% at 62% 52%, rgba(200,164,92,.10) 0%, rgba(200,164,92,0) 60%),
    linear-gradient(180deg,#0E0F12 0%,#0B0B0C 62%,#0A0A0B 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.30) 34%,rgba(11,11,12,0) 62%);
}
@media (max-width:900px){
  .hero::after{background:linear-gradient(180deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.30) 46%,rgba(11,11,12,.75) 100%)}
}

/* --- layout -------------------------------------------------------------- */
.hero-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center; gap:clamp(20px,4vw,54px);
  padding-block:clamp(44px,6vw,76px);
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:20px; padding-block:clamp(36px,7vw,56px)}
}

.hero h1{
  font-size:clamp(25px,3.1vw,40px); text-transform:uppercase; letter-spacing:-.005em;
  max-width:16ch; text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p.lead{color:#D6D6D2; font-size:clamp(14.5px,1.35vw,16.5px); max-width:48ch; margin-top:16px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* --- the car ------------------------------------------------------------- */
.hero-car{position:relative}
.hero-car img{
  width:100%; max-width:700px; height:auto; margin-inline:auto;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.62));
}
.hero-car::after{           /* pool of light on the floor under the car */
  content:""; position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  width:78%; height:16%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(200,164,92,.20), rgba(200,164,92,0) 72%);
}
@media (max-width:900px){
  .hero-car img{max-width:min(460px,86%)}
}

/* the drawn car, when no photograph has been supplied */
.hero-art{position:relative; width:100%}
.hero-art svg{width:100%; max-width:820px; height:auto; margin-inline:auto; display:block}
@media (max-width:900px){ .hero-art svg{max-width:min(520px,96%)} }


/* --- full-bleed photograph variant --------------------------------------- */
/* The photo gets its own column and is never covered by type. */
.hero-photo{min-height:min(66vh,560px); background:#08080A}
.hero-photo::after{display:none}
.hero-photo .hero-inner{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(24px,4vw,56px)}

.hero-media{position:relative; width:100%}
.hero-media img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.65);
}

@media (max-width:900px){
  .hero-photo{min-height:0; flex-direction:column; align-items:stretch}
  .hero-photo .hero-inner{grid-template-columns:1fr; gap:26px}
  .hero-media{order:2}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding-block:clamp(56px,8vw,104px)}
.section.tight{padding-block:clamp(40px,5vw,64px)}
.section.alt{background:var(--panel)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.6vw,40px); text-transform:uppercase}
.sec-head p{color:var(--muted); margin:10px 0 0; max-width:60ch}
.sec-head .link{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px; font-weight:600; white-space:nowrap;
}
.sec-head .link:hover{gap:14px; transition:gap .2s}
.sec-head .link svg{width:14px; height:14px}

/* ==========================================================================
   Vehicle cards
   ========================================================================== */
.grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

.card{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:.25s; position:relative;
}
.card:hover{border-color:rgba(200,164,92,.5); transform:translateY(-3px)}
.card-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0F0F11}
.card-media img, .card-media .ph{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.045)}
.card-badges{position:absolute; top:12px; left:12px; display:flex; gap:7px; flex-wrap:wrap; z-index:2}
.badge{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:5px 10px; border-radius:2px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  border:1px solid var(--line); color:var(--text);
}
.badge.gold{background:var(--accent); color:#100D06; border-color:var(--accent)}
.badge.sold{background:var(--danger); color:#fff; border-color:var(--danger)}
.badge.reserved{background:#B4770F; color:#fff; border-color:#B4770F}
.card-photos{
  position:absolute; bottom:12px; right:12px; z-index:2; font-size:10.5px; letter-spacing:.1em;
  background:rgba(0,0,0,.7); border:1px solid var(--line); padding:4px 9px; border-radius:2px;
  display:flex; align-items:center; gap:6px; color:#D6D6D2;
}
.card-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.card-year{font-size:11px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; font-weight:600}
.card-body h3{font-size:19px; margin:8px 0 3px; letter-spacing:-.01em}
.card-trim{color:var(--muted); font-size:13.5px; margin-bottom:16px; min-height:1.4em}
.card-specs{
  display:flex; flex-wrap:wrap; gap:8px 18px; padding-block:14px; margin-top:auto;
  border-top:1px solid var(--line-2); color:var(--muted); font-size:12.5px;
}
.card-specs span{display:inline-flex; align-items:center; gap:7px}
.card-specs svg{width:14px; height:14px; opacity:.65; flex:0 0 auto}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line-2)}
.price{font-size:21px; font-weight:700; letter-spacing:-.01em}
.price small, .amount small{font-size:11.5px; color:var(--muted); font-weight:500; letter-spacing:.12em; display:block; margin-bottom:1px}
.price.poa{font-size:15px; color:var(--accent); letter-spacing:.06em; text-transform:uppercase}
.card-foot .arrow{
  width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--accent); flex:0 0 auto; transition:.2s; border-radius:var(--radius);
}
.card-foot .arrow svg{width:16px; height:16px}
.card:hover .card-foot .arrow{background:var(--accent); color:#100D06; border-color:var(--accent)}
.card .stretch{position:absolute; inset:0; z-index:1}

/* ==========================================================================
   Inventory toolbar / filters
   ========================================================================== */
.page-head{background:var(--panel); border-bottom:1px solid var(--line-2); padding-block:clamp(38px,6vw,64px)}
.page-head h1{font-size:clamp(30px,4.6vw,52px); text-transform:uppercase}
.page-head p{color:var(--muted); margin-top:12px; max-width:62ch}
.crumbs{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5; margin-inline:8px}

.filters{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:20px; margin-bottom:30px;
}
.filter-row{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
select,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=url],textarea{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:11px 13px; border-radius:var(--radius); width:100%; transition:.18s; font-size:14px;
}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--accent); background:#212125}
select{appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9BA1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px; padding-right:34px}
textarea{min-height:130px; resize:vertical; line-height:1.6}
.filter-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center}
.result-count{color:var(--muted); font-size:13px; margin-left:auto}
.result-count b{color:var(--text)}

/* ==========================================================================
   Vehicle detail
   ========================================================================== */
.vd{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:44px; align-items:start}
.vd > *{min-width:0}
/* per-page sidebar widths — kept here, never as an inline style attribute, because
   an inline style beats a media query and would strand these pages in two columns
   on a phone */
.vd-sell{grid-template-columns:minmax(0,1fr) 340px}
.vd-contact{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1040px){
  .vd, .vd-sell, .vd-contact{grid-template-columns:minmax(0,1fr); gap:34px}
}

.gallery-main{
  position:relative; aspect-ratio:16/9; background:#0F0F11; border:1px solid var(--line-2);
  border-radius:var(--radius-lg); overflow:hidden;
}
.gallery-main img, .gallery-main .ph{width:100%; height:100%; object-fit:cover}
.gnav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  background:rgba(0,0,0,.6); border:1px solid var(--line); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:.2s; border-radius:var(--radius);
}
.gnav:hover{background:var(--accent); color:#100D06; border-color:var(--accent)}
.gnav svg{width:20px; height:20px}
.gnav.prev{left:14px} .gnav.next{right:14px}
.gcount{
  position:absolute; bottom:14px; right:14px; background:rgba(0,0,0,.7); border:1px solid var(--line);
  padding:5px 11px; font-size:12px; letter-spacing:.08em; border-radius:2px;
}
/* One scrolling row, however many photos there are — a car with sixty photos
   must not push the specification off the bottom of the page. */
.thumbstrip{position:relative; margin-top:11px; min-width:0; max-width:100%}
.thumbs{
  display:flex; flex-wrap:nowrap; gap:9px; overflow-x:auto; overflow-y:hidden;
  min-width:0; max-width:100%;
  scroll-behavior:smooth; scroll-snap-type:x proximity;
  padding-bottom:9px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.thumbs::-webkit-scrollbar{height:6px}
.thumbs::-webkit-scrollbar-track{background:rgba(255,255,255,.04); border-radius:3px}
.thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:3px}
.thumbs::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.thumbs button{
  flex:0 0 112px; width:112px; height:63px;      /* 16:9, stated outright */
  scroll-snap-align:start; padding:0; border:1px solid var(--line-2);
  background:#0F0F11; cursor:pointer; overflow:hidden; border-radius:3px;
  transition:.18s; opacity:.62;
}
.thumbs button:hover{opacity:1}
.thumbs button.is-on{border-color:var(--accent); opacity:1}
.thumbs img, .thumbs .ph{width:100%; height:100%; object-fit:cover}
@media (max-width:640px){ .thumbs button{flex:0 0 96px; width:96px; height:54px} }

/* arrows for mouse users; the strip is swipeable on touch regardless */
.tnav{
  position:absolute; top:calc(50% - 5px); transform:translateY(-50%); z-index:3;
  width:32px; height:44px; display:none; place-items:center; cursor:pointer;
  background:rgba(11,11,12,.86); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius); transition:.18s;
}
.tnav:hover{border-color:var(--accent); color:var(--accent)}
.tnav svg{width:17px; height:17px}
.tnav.prev{left:-6px} .tnav.next{right:-6px}
.tnav.on{display:grid}
@media (hover:none){ .tnav{display:none !important} }

.vd-title h1{font-size:clamp(26px,3.6vw,40px); text-transform:uppercase; margin-bottom:6px}
.vd-title .sub{color:var(--muted); font-size:15px}
.vd-price{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:24px; margin-top:20px;
}
.vd-price .amount{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.vd-price .amount.poa{font-size:22px; color:var(--accent); text-transform:uppercase; letter-spacing:.04em}
.vd-price .alt{color:var(--muted); font-size:13px; margin-top:5px}
.vd-actions{display:grid; gap:10px; margin-top:20px}
.vd-actions .split{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.specs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--line-2); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel);
}
.specs div{padding:16px 18px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.specs dt{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:5px}
.specs dd{margin:0; font-size:15px; font-weight:500}

.prose{color:#CFCFCB; font-size:15.5px; line-height:1.8}
.prose h2{font-size:20px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px}
.prose a{color:var(--accent); border-bottom:1px solid rgba(200,164,92,.4)}
.prose a:hover{border-bottom-color:var(--accent)}

/* long-form intro copy — About page */
.prose-lead{max-width:70ch; font-size:clamp(16px,1.5vw,18px); line-height:1.85}
.prose-lead h2{
  font-size:clamp(26px,3.4vw,38px); text-transform:none; letter-spacing:-.015em;
  margin-bottom:26px; line-height:1.15; text-wrap:balance;
}
.prose-lead p + p{margin-top:1.15em}

.features{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px 22px}
.features li{position:relative; padding-left:22px; color:#CFCFCB; font-size:14.5px}
.features li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1px solid var(--accent); transform:rotate(45deg)}

.divider{height:1px; background:var(--line-2); margin-block:38px}

.sticky-side{position:sticky; top:96px}

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(5,5,6,.97); z-index:200;
  display:none; place-items:center; padding:24px;
}
.lightbox.open{display:grid}
.lightbox img{
  max-width:min(1500px,92vw); max-height:86vh; object-fit:contain;
  border-radius:3px; user-select:none; -webkit-user-drag:none;
}
.lightbox .close{
  position:absolute; top:20px; right:24px; z-index:3;
  background:rgba(11,11,12,.7); border:1px solid var(--line); color:#fff;
  width:46px; height:46px; cursor:pointer; display:grid; place-items:center;
  border-radius:var(--radius); transition:.18s;
}
.lightbox .close:hover{border-color:var(--accent); color:var(--accent)}

/* step through the photos without leaving the viewer */
.lbnav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:54px; height:54px; display:grid; place-items:center; cursor:pointer;
  background:rgba(11,11,12,.7); border:1px solid var(--line); color:#fff;
  border-radius:var(--radius); transition:.18s;
}
.lbnav:hover{background:var(--accent); border-color:var(--accent); color:#100D06}
.lbnav.prev{left:clamp(10px,3vw,40px)}
.lbnav.next{right:clamp(10px,3vw,40px)}
.lbnav svg{width:22px; height:22px}
.lbcount{
  position:absolute; bottom:clamp(14px,3vh,30px); left:50%; transform:translateX(-50%); z-index:3;
  background:rgba(11,11,12,.75); border:1px solid var(--line); color:var(--text);
  padding:7px 15px; border-radius:20px; font-size:13px; letter-spacing:.08em;
}
@media (max-width:640px){
  .lightbox{padding:12px}
  .lbnav{width:44px; height:44px}
  .lbnav.prev{left:8px} .lbnav.next{right:8px}
}

/* ==========================================================================
   Content blocks
   ========================================================================== */
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:900px){ .split-2{grid-template-columns:1fr} }
.split-2 .media{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2)}
.split-2 .media img, .split-2 .media .ph{width:100%; height:100%; object-fit:cover}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.tile{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:28px 24px}
.tile .ico{width:40px; height:40px; color:var(--accent); margin-bottom:16px}
.tile h3{font-size:16px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px}
.tile p{color:var(--muted); font-size:14.5px; margin:0}

.cta-band{
  background:linear-gradient(120deg,#151517 0%,#0E0E10 100%);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding-block:clamp(46px,6vw,76px); text-align:center;
}
.cta-band h2{font-size:clamp(26px,4vw,42px); text-transform:uppercase; max-width:20ch; margin-inline:auto}
.cta-band p{color:var(--muted); max-width:56ch; margin:16px auto 0}
.cta-band .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px}

.brandstrip{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center}
.brandstrip a{
  border:1px solid var(--line-2); padding:11px 20px; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); transition:.2s; border-radius:var(--radius);
}
.brandstrip a:hover{border-color:var(--accent); color:var(--accent)}

/* forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
.note{font-size:12.5px; color:var(--muted)}
.alert{padding:14px 16px; border-radius:var(--radius); border:1px solid; font-size:14px; margin-bottom:20px}
.alert.ok{border-color:rgba(63,166,106,.45); background:rgba(63,166,106,.10); color:#8FE0B2}
.alert.err{border-color:rgba(217,69,60,.45); background:rgba(217,69,60,.10); color:#F0A19B}

/* ==========================================================================
   Footer + floating WhatsApp
   ========================================================================== */
.site-footer{background:#08080A; border-top:1px solid var(--line-2); padding-top:clamp(46px,6vw,72px)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.site-footer h4{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text); margin-bottom:18px}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.site-footer a, .site-footer li{color:var(--muted); font-size:14px}
.site-footer a:hover{color:var(--accent)}
.foot-about p{color:var(--muted); font-size:14px; margin-top:18px; max-width:38ch}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; border-radius:var(--radius); transition:.2s}
.socials a:hover{border-color:var(--accent); color:var(--accent)}
.socials svg{width:16px; height:16px}
.foot-bar{
  margin-top:clamp(36px,5vw,56px); border-top:1px solid var(--line-2); padding-block:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#04270F; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:.2s;
}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:28px; height:28px}

/* ==========================================================================
   Placeholder artwork (used until real photos are uploaded)
   ========================================================================== */
.ph{
  display:grid; place-items:center; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(200,164,92,.16) 0%, rgba(200,164,92,0) 55%),
    linear-gradient(155deg, #24242A 0%, #131317 45%, #0C0C0F 100%);
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.026) 0 2px, transparent 2px 9px);
}
.ph svg{width:62%; max-width:340px; height:auto; opacity:.5; color:#7E7E88; position:relative; z-index:1}

/* ==========================================================================
   Utility
   ========================================================================== */
.mt-0{margin-top:0} .mt-2{margin-top:18px} .mt-3{margin-top:28px} .mt-4{margin-top:40px}
.center{text-align:center}
.muted{color:var(--muted)}
.empty{
  border:1px dashed var(--line); border-radius:var(--radius-lg); padding:60px 24px;
  text-align:center; color:var(--muted);
}
.empty h3{color:var(--text); margin-bottom:10px; font-size:19px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }