@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');

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

:root{
  --navy-950:#0a0e16;
  --navy-900:#0f1524;
  --navy-800:#161d30;
  --navy-700:#232c45;
  --paper:#f7f4ec;
  --paper-alt:#efe8d6;
  --white:#ffffff;
  --ink:#13151b;
  --ink-soft:#5c6470;
  --ink-faint:#94909b;
  --on-dark:#f3f1e9;
  --on-dark-soft:#a8adba;
  --line:#e4ddc9;
  --line-dark:rgba(255,255,255,.12);
  --gold:#c9a24b;
  --gold-deep:#a17f34;
  --gold-soft:rgba(201,162,75,.15);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-card:0 18px 40px -20px rgba(10,14,22,.35);
  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html,body{background:var(--paper);}
body{
  width:1440px;
  font-family:var(--font-sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-light{color:var(--gold-deep);}

/* ===== HEADER ===== */
header.site{
  height:84px;
  background:var(--navy-950);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 44px;
  border-bottom:1px solid var(--line-dark);
}
.logo{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:600;
  color:var(--on-dark);
  letter-spacing:.005em;
  white-space:nowrap;
  flex-shrink:0;
}
.logo .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.logo-chip{
  width:32px;height:32px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:5px;
}
.logo-chip img{width:100%;height:100%;object-fit:contain;}
nav.primary{
  display:flex;
  align-items:center;
  gap:22px;
  flex-shrink:1;
  min-width:0;
}
nav.primary a{
  font-size:13px;
  font-weight:500;
  color:var(--on-dark-soft);
  padding:6px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
nav.primary a.active{
  color:var(--on-dark);
  border-bottom-color:var(--gold);
}
.header-right{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.lang-switch{
  display:flex;
  gap:4px;
  font-size:12px;
  font-weight:600;
  color:var(--on-dark-soft);
  white-space:nowrap;
}
.lang-switch span{padding:4px 6px;border-radius:5px;}
.lang-switch span.on{background:var(--line-dark);color:var(--on-dark);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:13.5px;
  border-radius:999px;
  padding:12px 22px;
  border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:var(--navy-950);}
.btn-ghost-dark{border-color:rgba(255,255,255,.4);color:var(--on-dark);background:transparent;}
.btn-ghost-light{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline-gold{border-color:var(--gold);color:var(--gold-deep);background:transparent;}
.btn-sm{padding:9px 18px;font-size:13px;}

/* ===== PAGE BANNER (inner pages) ===== */
.page-banner{
  background:var(--navy-950);
  padding:56px 56px 64px;
  position:relative;
  overflow:hidden;
}
.breadcrumb{
  font-size:13px;
  color:var(--on-dark-soft);
  margin-bottom:22px;
  display:flex;
  gap:8px;
}
.breadcrumb b{color:var(--on-dark);font-weight:600;}
h1.page-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:44px;
  color:var(--on-dark);
  max-width:760px;
  line-height:1.15;
}
.page-sub{
  margin-top:14px;
  font-size:16px;
  color:var(--on-dark-soft);
  max-width:640px;
  line-height:1.6;
}

/* ===== SECTIONS ===== */
section{padding:72px 56px;}
section.dark{background:var(--navy-900);color:var(--on-dark);}
section.paper-alt{background:var(--paper-alt);}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:38px;
}
h2.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:32px;
  margin-top:8px;
}
.section-link{
  font-size:14px;
  font-weight:700;
  color:var(--gold-deep);
  display:flex;
  align-items:center;
  gap:6px;
}
section.dark .section-link{color:var(--gold);}

/* ===== CARDS: generic catalog card ===== */
.card{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
}
.card .thumb{
  height:190px;
  position:relative;
  overflow:hidden;
}
.card .thumb img.cover, .thumb img.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.card .thumb img.poster, .thumb img.poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;
}
.card .thumb .badge{
  position:absolute;
  top:14px;left:14px;
  background:rgba(10,14,22,.72);
  color:var(--on-dark);
  font-size:11.5px;
  font-weight:700;
  padding:6px 11px;
  border-radius:999px;
  letter-spacing:.02em;
}
.card .body{padding:20px 22px 22px;}
.card h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  margin-bottom:10px;
  line-height:1.3;
}
.card .meta-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.meta-chip{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:600;
}
.meta-chip .ic{
  width:14px;height:14px;
  color:var(--gold-deep);
  flex-shrink:0;
}
svg.ic{width:14px;height:14px;flex-shrink:0;display:inline-block;vertical-align:-2.5px;color:var(--gold-deep);margin-right:2px;}
svg.ic-lg{width:20px;height:20px;flex-shrink:0;display:inline-block;}
.card .cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.card .cta-link{
  font-size:13.5px;
  font-weight:700;
  color:var(--gold-deep);
}

/* photographic placeholder gradients (stand-ins for real photography) */
.ph-1{background:linear-gradient(135deg,#2b3350,#1a2036 55%,#0e1220);}
.ph-2{background:linear-gradient(135deg,#3a2f22,#22201c 60%,#141310);}
.ph-3{background:linear-gradient(135deg,#33465a,#1c2836 55%,#0f1620);}
.ph-4{background:linear-gradient(135deg,#4a3a2a,#2a2420 60%,#161412);}
.ph-5{background:linear-gradient(135deg,#2f3d3a,#1b2624 55%,#0f1614);}
.ph-6{background:linear-gradient(135deg,#3c3350,#211c33 55%,#12101c);}
.ph-mesh::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 45%),
             radial-gradient(circle at 80% 85%, rgba(201,162,75,.20), transparent 50%);
}

/* ===== STAT STRIP ===== */
.stat-strip{
  background:var(--navy-800);
  display:flex;
  padding:40px 56px;
}
.stat{
  flex:1;
  padding:0 32px;
  border-left:1px solid var(--line-dark);
}
.stat:first-child{border-left:none;padding-left:0;}
.stat .num{
  font-family:var(--font-display);
  font-size:38px;
  color:var(--gold);
  font-weight:600;
}
.stat .label{
  margin-top:6px;
  font-size:13px;
  color:var(--on-dark-soft);
  line-height:1.4;
}

/* ===== LOOP / MARQUEE ROW ===== */
.loop-row{
  position:relative;
  display:flex;
  gap:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.loop-dots{
  display:flex;
  gap:6px;
  margin-top:28px;
  justify-content:center;
}
.loop-dots span{width:6px;height:6px;border-radius:50%;background:var(--line);}
.loop-dots span.on{background:var(--gold-deep);width:20px;border-radius:4px;}

/* ===== FILTER SIDEBAR ===== */
aside.filters{
  width:264px;
  flex-shrink:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 24px;
  height:fit-content;
}
.filter-group{
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.filter-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.filter-group h4{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  font-weight:700;
  margin-bottom:14px;
}
.range-track{
  height:4px;
  background:var(--line);
  border-radius:2px;
  position:relative;
  margin:18px 4px 10px;
}
.range-track .fill{
  position:absolute;left:18%;right:35%;top:0;bottom:0;
  background:var(--gold);
  border-radius:2px;
}
.range-track .knob{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--white);border:2.5px solid var(--gold);
}
.range-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);font-weight:600;}
.chk-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--ink);
  padding:6px 0;
}
.chk-box{
  width:17px;height:17px;border-radius:5px;
  border:1.5px solid var(--line);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.chk-box.on{background:var(--gold);border-color:var(--gold);color:var(--navy-950);font-size:11px;font-weight:800;}
.chk-count{margin-left:auto;color:var(--ink-faint);font-size:12.5px;}

/* ===== FOOTER ===== */
footer.site{
  background:var(--navy-950);
  color:var(--on-dark-soft);
  padding:60px 56px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.4fr 1.1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line-dark);
}
.footer-grid h5{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--on-dark-soft);
  font-weight:700;
  margin-bottom:18px;
}
.footer-grid li{font-size:14px;margin-bottom:11px;color:var(--on-dark-soft);}
.footer-grid .fine li{font-size:12.5px;color:#666f80;margin-bottom:9px;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  font-size:12.5px;
  color:#565f6f;
}
.social{display:flex;gap:10px;margin-top:16px;}
.social span{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--on-dark-soft);
}

/* skyline silhouette */
.skyline{position:absolute;left:0;right:0;bottom:0;opacity:.9;}