/* ══════════════════════════════════════════════════════════════
   TROUVAILLE DESIGNS — Shared Stylesheet
   BMW Design System: Barlow 300/400/700/900, zero border-radius,
   clean dark (#0d0d0d) / pure white (#ffffff) showroom rhythm,
   copper accent (#b8864e) for interactive ONLY
══════════════════════════════════════════════════════════════ */

/* Fonts loaded via <link> in HTML for non-blocking render */
/* Hero elements: hidden only when .js class present (set by JS synchronously) */
:root {
  --dark:    #0d0d0d;
  --dark2:   #161616;
  --white:   #ffffff;
  --off:     #f7f7f7;
  --text:    #1a1a1a;
  --muted:   #757575;
  --silver:  #bbbbbb;
  --copper:  #b8864e;
  --copper2: #9a6d38;
  --border:  rgba(0,0,0,.09);
  --border-w:rgba(255,255,255,.1);
  /* BMW principles */
  --f:   'Barlow', Helvetica, Arial, sans-serif;
  --lh:  1.15;   /* tight — never more than 1.30 */
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--white); color:var(--text);
  font-family:var(--f); font-size:16px; font-weight:400;
  line-height:var(--lh); overflow-x:hidden; cursor:none;
}
img { display:block; width:100%; height:100%; object-fit:cover; }
a   { text-decoration:none; color:inherit; cursor:none; }
button { cursor:none; border:none; background:none; font-family:var(--f); }

/* ── CUSTOM CURSOR ── */
@media(pointer:fine){
  #cur   { position:fixed; top:0; left:0; width:8px; height:8px; background:var(--copper); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .22s,height .22s,opacity .22s; }
  #cur-r { position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--copper); pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:.45; transition:left .08s,top .08s; }
  .ch #cur   { width:48px; height:48px; opacity:.1; }
  .ch #cur-r { opacity:0; }
}

/* ── HERO CSS ENTRY ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp  { from { transform:translateY(110%); } to { transform:translateY(0); } }

.js .h-label, .js .ph-label {
  animation: fadeUp .6s ease both;
  animation-delay: .1s;
}
.js .h-title .wd, .js .ph-title .wd {
  animation: slideUp .75s cubic-bezier(.16,1,.3,1) both;
}
.js .h-title .ln:nth-child(1) .wd { animation-delay:.15s; }
.js .h-title .ln:nth-child(2) .wd { animation-delay:.25s; }
.js .h-title .ln:nth-child(3) .wd { animation-delay:.35s; }
.js .ph-title .ln:nth-child(1) .wd { animation-delay:.15s; }
.js .ph-title .ln:nth-child(2) .wd { animation-delay:.25s; }
.js .h-meta, .js .ph-meta {
  animation: fadeIn .6s ease both;
  animation-delay: .6s;
}
.js .h-scroll {
  animation: fadeIn .5s ease both;
  animation-delay: 1s;
}

/* ── NAV ── */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:72px; padding:0 64px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
  transition:background .3s, border-color .3s;
}
#main-nav.scrolled {
  background:rgba(13,13,13,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.n-logo { flex-shrink:0; }
.n-logo img { width:140px; height:auto; object-fit:contain; display:block; }

.n-links { display:flex; gap:40px; align-items:center; }
.n-links a {
  font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6); line-height:var(--lh);
  position:relative; padding-bottom:3px; transition:color .22s;
}
.n-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--copper); transition:width .28s; }
.n-links a:hover, .n-links a.act { color:#fff; }
.n-links a:hover::after, .n-links a.act::after { width:100%; }

.n-cta {
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.3);
  transition:border-color .22s, color .22s;
}
.n-cta:hover { border-color:var(--copper); color:var(--copper); }

/* Hamburger */
.n-ham { display:none; flex-direction:column; gap:5px; width:26px; padding:4px 0; z-index:10; }
.n-ham span { display:block; height:1.5px; background:#fff; transition:transform .3s,opacity .22s,width .3s; transform-origin:left center; }
.n-ham span:nth-child(2){ width:68%; }
#main-nav.open .n-ham span:nth-child(1){ transform:rotate(40deg) translateY(-1px); }
#main-nav.open .n-ham span:nth-child(2){ opacity:0; width:0; }
#main-nav.open .n-ham span:nth-child(3){ transform:rotate(-40deg) translateY(1px); }

/* Mobile drawer */
#mob-menu {
  display:none; position:fixed; inset:0; background:var(--dark); z-index:790;
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#mob-menu.open { opacity:1; pointer-events:all; }
#mob-menu a {
  font-size:clamp(32px,8vw,52px); font-weight:300; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.45); transition:color .22s;
}
#mob-menu a:hover { color:#fff; }
#mob-menu .mob-cta {
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--copper); border-bottom:1px solid var(--copper); padding-bottom:2px; margin-top:8px;
}

/* ── BUTTONS (zero border-radius — BMW non-negotiable) ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; line-height:var(--lh);
  transition:background .22s, color .22s, border-color .22s;
}
.btn-dk  { background:var(--dark); color:#fff; border:1px solid var(--dark); }
.btn-dk:hover { background:var(--copper); border-color:var(--copper); }
.btn-cu  { background:var(--copper); color:#fff; border:1px solid var(--copper); }
.btn-cu:hover { background:var(--copper2); border-color:var(--copper2); }
.btn-wh  { background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.35); padding-left:0; padding-right:0; }
.btn-wh:hover { border-color:#fff; }
.btn-ou  { background:transparent; color:var(--text); border:1px solid var(--text); }
.btn-ou:hover { background:var(--dark); color:#fff; }
.btn-ou-w{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-ou-w:hover{ border-color:#fff; }

/* ── SECTION UTILITIES ── */
.sec      { padding:120px 64px; }
.sec-dark { background:var(--dark); color:#fff; }
.sec-mid  { background:var(--dark2); color:#fff; }
.sec-off  { background:var(--off); }

/* BMW label — thin line + uppercase text */
.s-lbl {
  display:inline-flex; align-items:center; gap:14px;
  font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--copper); margin-bottom:20px;
}
.s-lbl::before { content:''; width:28px; height:1px; background:var(--copper); flex-shrink:0; }

/* BMW display heading — weight 300, uppercase, tight */
.s-h {
  font-size:clamp(38px,5vw,72px); font-weight:300;
  text-transform:uppercase; line-height:1.08; letter-spacing:.01em;
}
.s-h em   { font-style:normal; color:var(--copper); }
.s-h-lt   { color:#fff; }
.s-h-dark { color:var(--text); }

/* ── HERO (shared across pages) ── */
.page-hero {
  height:100vh; min-height:640px; position:relative; overflow:hidden;
  background:var(--dark);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 64px 96px;
}
.ph-bg { position:absolute; inset:0; }
.ph-bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.07); }
.ph-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,13,13,.9) 0%,rgba(13,13,13,.35) 55%,rgba(13,13,13,.05) 100%); }
.ph-content { position:relative; z-index:2; max-width:960px; }
.ph-label {
  font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--copper); margin-bottom:22px;
}
.ph-title {
  font-size:clamp(52px,10vw,128px); font-weight:300; text-transform:uppercase;
  line-height:1.0; color:#fff; letter-spacing:-.01em;
}
.ph-title .ln  { display:block; overflow:hidden; }
.ph-title .wd  { display:inline-block; }
.ph-meta { display:flex; align-items:center; gap:48px; margin-top:40px; flex-wrap:wrap; }
.ph-desc { font-size:13px; font-weight:400; line-height:1.65; color:rgba(255,255,255,.45); max-width:340px; }
.ph-acts { display:flex; gap:16px; flex-wrap:wrap; }

/* Scroll hint */
.h-scroll { position:absolute; right:64px; bottom:96px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.h-scroll span { font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.3); writing-mode:vertical-rl; }
.sc-ln { width:1px; height:56px; background:rgba(255,255,255,.12); overflow:hidden; position:relative; }
.sc-ln::after { content:''; position:absolute; top:-100%; width:100%; height:100%; background:var(--copper); animation:scrl 2s ease-in-out infinite; }
@keyframes scrl { to { top:100%; } }

/* ── MARQUEE ── */
.mq { overflow:hidden; background:var(--dark); border-top:1px solid var(--border-w); border-bottom:1px solid var(--border-w); padding:18px 0; }
.mq-t { display:flex; white-space:nowrap; animation:mqr 28s linear infinite; will-change:transform; transform:translateZ(0); }
.mq-i { display:inline-flex; align-items:center; gap:24px; padding:0 24px; font-size:12px; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.22); flex-shrink:0; }
.mq-d { width:3px; height:3px; background:var(--copper); flex-shrink:0; }
@keyframes mqr { to { transform:translateX(-50%); } }

/* ── STATS STRIP ── */
.stats-strip { display:grid; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-strip.col-3 { grid-template-columns:repeat(3,1fr); }
.stats-strip.col-4 { grid-template-columns:repeat(4,1fr); }
.stat-item { padding:40px 48px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-size:clamp(44px,5vw,64px); font-weight:300; text-transform:uppercase; line-height:1.0; color:var(--text); }
.stat-num sup { font-size:.42em; color:var(--copper); vertical-align:super; line-height:0; }
.stat-unit { font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

.stats-strip.dark { background:var(--dark); border-color:var(--border-w); }
.stats-strip.dark .stat-item { border-color:var(--border-w); }
.stats-strip.dark .stat-num { color:#fff; }
.stats-strip.dark .stat-unit { color:rgba(255,255,255,.3); }

/* ── IMAGE PLACEHOLDER — dark bg while loading, no white flash ── */
.ab-img, .wy-img, .st-img, .svc-img, .gl-i, .sv-img, .pg-item { background:var(--dark2); }

/* ── GALLERY STRIP ── */
.gl { overflow:hidden; }
.gl-t { display:flex; gap:3px; animation:glr 32s linear infinite; will-change:transform; transform:translateZ(0); }
.gl-t:hover { animation-play-state:paused; }
.gl-i { flex-shrink:0; width:320px; height:210px; overflow:hidden; contain:strict; }
.gl-i img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s; will-change:transform; }
.gl-i:hover img { transform:scale(1.06); }
@keyframes glr { to { transform:translateX(-50%); } }

/* ── SCROLL REVEAL — progressive enhancement ── */
.js .rv  { opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease; }
.js .rvf { opacity:0; transition:opacity .65s ease; }
.rv.vis  { opacity:1 !important; transform:translateY(0) !important; }
.rvf.vis { opacity:1 !important; }

/* ── PROJECT FOLLOWER ── */
#pf { position:fixed; top:0; left:0; width:180px; height:124px; overflow:hidden; pointer-events:none; z-index:500; opacity:0; transform:translate(-50%,-50%) scale(.85); transition:opacity .28s,transform .28s; }
#pf img { width:100%; height:100%; object-fit:cover; }

/* ── FOOTER ── */
#site-footer { background:var(--dark); color:#fff; padding:64px 64px 40px; }
.ft-top { display:flex; justify-content:space-between; align-items:flex-start; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.ft-logo img { width:120px; height:auto; object-fit:contain; display:block; }
.ft-tagline { font-size:12px; font-weight:400; color:rgba(255,255,255,.3); letter-spacing:.04em; margin-top:14px; }
.ft-cols { display:flex; gap:64px; flex-wrap:wrap; }
.ft-col-hd { font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:20px; }
.ft-links-list { display:flex; flex-direction:column; gap:12px; }
.ft-links-list a { font-size:13px; font-weight:400; color:rgba(255,255,255,.45); transition:color .2s; letter-spacing:.02em; }
.ft-links-list a:hover { color:#fff; }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px; }
.ft-copy { font-size:11px; font-weight:400; color:rgba(255,255,255,.2); letter-spacing:.04em; }
.ft-socials { display:flex; gap:20px; }
.ft-socials a { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.28); transition:color .2s; }
.ft-socials a:hover { color:var(--copper); }

/* ── CANVAS backgrounds ── */
.sec-cv { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.sec-rel > *:not(.sec-cv) { position:relative; z-index:1; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #main-nav { padding:0 40px; }
  .sec, .page-hero { padding-left:40px; padding-right:40px; }
  .page-hero { padding-bottom:72px; }
  #site-footer { padding:56px 40px 32px; }
  .ft-cols { gap:40px; }
  .stat-item { padding:32px; }
}
@media(max-width:768px){
  .n-links, .n-cta { display:none; }
  .n-ham { display:flex; }
  #mob-menu { display:flex; }
  .stats-strip.col-3, .stats-strip.col-4 { grid-template-columns:1fr 1fr; }
  .stat-item:nth-child(2n) { border-right:none; }
  .stat-item { border-bottom:1px solid var(--border); }
  .stats-strip.dark .stat-item { border-bottom-color:var(--border-w); }
}
@media(max-width:640px){
  #main-nav { padding:0 20px; height:60px; }
  .sec { padding:72px 20px; }
  .page-hero { padding:0 20px 64px; }
  #site-footer { padding:44px 20px 28px; }
  .stats-strip.col-3, .stats-strip.col-4 { grid-template-columns:1fr; }
  .stat-item { border-right:none; }
  .ph-title { font-size:clamp(40px,12vw,72px); }
}