/* ═══════════════════════════════════════════════════
   TheCreade — Global Stylesheet  v4  DARK EDITION
   Palette: Near-black · Off-white · Signal Orange
   ═══════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:    #0D0D0B;   /* page bg — near black, faint warm cast */
  --bg2:   #131311;   /* cards, elevated surfaces */
  --bg3:   #1A1917;   /* higher elevation */
  --bg4:   #222018;   /* hover state */

  /* Text */
  --ink:   #EDECE8;   /* primary — off-white, not pure white */
  --ink2:  #B2ADA5;   /* body text — WCAG AA on --bg */
  --ink3:  #7A7670;   /* captions */

  /* Borders */
  --line:  rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.13);

  /* Accent — Signal Orange (automotive / editorial / industrial) */
  --acc:   #E04800;
  --acc2:  #FF5C1A;   /* brighter variant for text on dark */
  --acc-dim: rgba(224,72,0,.18);

  /* Status */
  --green: #4CAF78;

  /* Typography */
  --fd: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;

  /* Easing */
  --eo: cubic-bezier(.16,1,.3,1);
  --ei: cubic-bezier(.85,0,.15,1);
  --es: cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  background:var(--bg); color:var(--ink);
  font-family:var(--fb); overflow-x:hidden;
}
body { overflow-x:hidden; cursor:none; }
a    { color:inherit; text-decoration:none; }
button { background:none; border:none; color:inherit; font:inherit; cursor:none; }
img  { display:block; width:100%; height:100%; object-fit:cover; }

/* Accessible body text — always off-white on dark */
p {
  color:var(--ink2);
  line-height:1.85;
  font-size:.92rem;
}
@media (hover:none) { body { cursor:auto; } }

/* ── CURSOR ──────────────────────────────────── */
#cd {
  position:fixed; top:0; left:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--ink); pointer-events:none; z-index:9000;
  transform:translate(-50%,-50%);
  transition:width .3s var(--eo), height .3s var(--eo), background .3s;
}
#cr {
  position:fixed; top:0; left:0;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none; z-index:8999;
  transform:translate(-50%,-50%);
  transition:width .45s var(--eo), height .45s var(--eo), border-color .3s;
}
body.h-on #cd { width:12px; height:12px; background:var(--acc2); }
body.h-on #cr { width:52px; height:52px; border-color:var(--acc); }
body.lb-open #cd, body.lb-open #cr { opacity:0; }
@media (hover:none) { #cd, #cr { display:none; } }

/* ── NAV ─────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:68px; padding:0 5vw;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(13,13,11,.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:transform .5s var(--eo), background .3s;
}
#nav.scrolled { background:rgba(13,13,11,.95); }

.n-logo {
  font-family:var(--fd); font-size:1rem; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); position:relative;
}
.n-logo::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:2px; background:var(--acc);
  transition:width .4s var(--eo);
}
.n-logo:hover::after { width:100%; }

.n-links { display:flex; gap:0; list-style:none; height:100%; }
.n-links li { display:flex; align-items:center; }
.n-links a {
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); padding:.25rem 1.1rem; height:100%;
  display:flex; align-items:center; position:relative;
  transition:color .25s;
}
.n-links a::after {
  content:''; position:absolute; bottom:0; left:1.1rem; right:1.1rem;
  height:2px; background:var(--ink);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--eo);
}
.n-links a:hover          { color:var(--ink); }
.n-links a:hover::after   { transform:scaleX(1); }
.n-links a.active         { color:var(--ink); font-weight:600; }
.n-links a.active::after  { transform:scaleX(1); background:var(--acc); }

.n-right { display:flex; align-items:center; gap:1rem; }

.n-avail {
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); display:flex; align-items:center; gap:.45rem;
  padding:.4rem .9rem; border:1px solid rgba(76,175,120,.2);
  border-radius:2px;
}
.n-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:blink 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.n-cta {
  font-family:var(--fd); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.6rem 1.4rem;
  border:1px solid rgba(255,255,255,.15); color:var(--ink);
  position:relative; overflow:hidden; transition:color .4s, border-color .3s;
}
.n-cta::before {
  content:''; position:absolute; inset:0; background:var(--acc);
  transform:translateX(-101%); transition:transform .45s var(--ei);
}
.n-cta:hover::before { transform:translateX(0); }
.n-cta:hover { color:var(--ink); border-color:var(--acc); }
.n-cta span { position:relative; z-index:1; }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; padding:4px; z-index:510; }
.burger span { display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .3s, opacity .3s; }

/* Mobile overlay */
.m-nav {
  position:fixed; inset:0; background:var(--bg2); z-index:490;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; clip-path:inset(0 0 100% 0); transition:clip-path .65s var(--ei);
}
.m-nav.open { clip-path:inset(0 0 0% 0); }
.m-nav a {
  font-family:var(--fd); font-size:clamp(2.5rem,9vw,5rem);
  font-weight:700; letter-spacing:-.04em;
  opacity:0; transform:translateY(30px);
  transition:opacity .5s, transform .5s var(--eo), color .3s;
}
.m-nav.open a { opacity:1; transform:translateY(0); }
.m-nav.open a:nth-child(1){transition-delay:.07s}
.m-nav.open a:nth-child(2){transition-delay:.12s}
.m-nav.open a:nth-child(3){transition-delay:.17s}
.m-nav.open a:nth-child(4){transition-delay:.22s}
.m-nav.open a:nth-child(5){transition-delay:.27s}
.m-nav a:hover { color:var(--acc2); }
.m-nav-foot {
  position:absolute; bottom:3rem; left:0; right:0;
  display:flex; justify-content:center; gap:2rem;
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
  opacity:0; transition:opacity .5s .3s;
}
.m-nav.open .m-nav-foot { opacity:1; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--acc); color:var(--ink);
  font-family:var(--fd); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.9rem 1.9rem; position:relative; overflow:hidden;
  transition:color .4s; white-space:nowrap;
}
.btn::before {
  content:''; position:absolute; inset:0; background:var(--ink);
  transform:translateX(-101%); transition:transform .45s var(--ei);
}
.btn:hover::before { transform:translateX(0); }
.btn:hover { color:var(--acc2); }
.btn span { position:relative; z-index:1; }

.btn-o {
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:2px; transition:color .3s, border-color .3s; white-space:nowrap;
}
.btn-o:hover { color:var(--ink); border-color:rgba(255,255,255,.4); }

/* ── SECTION TYPOGRAPHY ──────────────────────── */
.slabel {
  font-size:.62rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:.8rem;
  margin-bottom:1.4rem;
}
.slabel::before { content:''; width:24px; height:1px; background:var(--acc); }

.stitle {
  font-family:var(--fd); font-size:clamp(2.8rem,5.5vw,5.5rem);
  font-weight:700; letter-spacing:-.04em; line-height:.9; color:var(--ink);
}
.stitle em { font-style:italic; font-weight:400; color:var(--acc2); }

/* Section dividers */
section { border-top:1px solid var(--line); }

/* ── MARQUEE ─────────────────────────────────── */
.mq {
  overflow:hidden;
  background:var(--bg3);
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}
.mq-t { display:flex; white-space:nowrap; animation:mroll 24s linear infinite; }
.mq-t:hover { animation-play-state:paused; }
.mi {
  display:inline-flex; align-items:center; gap:2rem; padding:0 2rem;
  flex-shrink:0; font-family:var(--fd); font-size:clamp(.75rem,1.3vw,.9rem);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
}
.md { width:4px; height:4px; border-radius:50%; background:var(--acc); flex-shrink:0; }
@keyframes mroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── HORIZONTAL SCROLL GALLERY ───────────────── */
.hs-section { padding:9vh 0; border-top:1px solid var(--line); }
.hs-head {
  padding:0 5vw 2.5rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
}
.hs-count {
  font-family:var(--fd); font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc2); background:var(--acc-dim);
  padding:.35rem .85rem;
}

.hs-track {
  display:flex; gap:clamp(10px,1.2vw,16px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 5vw 1.2rem;
  scrollbar-width:thin; scrollbar-color:var(--acc) var(--bg2);
  cursor:grab; -webkit-overflow-scrolling:touch;
}
.hs-track:active { cursor:grabbing; }
.hs-track::-webkit-scrollbar { height:2px; }
.hs-track::-webkit-scrollbar-track { background:var(--bg2); }
.hs-track::-webkit-scrollbar-thumb { background:var(--acc); }

.hs-nav { display:flex; gap:.6rem; padding:1.2rem 5vw 0; align-items:center; }
.hs-arr {
  width:38px; height:38px; border-radius:2px;
  border:1px solid var(--line2); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:all .25s; flex-shrink:0;
  background:transparent;
}
.hs-arr:hover { background:var(--acc); border-color:var(--acc); color:var(--ink); }
.hs-arr:disabled { opacity:.2; pointer-events:none; }
.hs-progress { flex:1; height:1px; background:var(--bg3); position:relative; max-width:140px; }
.hs-progress-fill { position:absolute; top:0; left:0; height:100%; background:var(--acc); transition:width .3s; }

/* Cards */
.hs-card {
  flex-shrink:0; scroll-snap-align:start;
  width:clamp(260px,30vw,440px);
  background:var(--bg2); position:relative; overflow:hidden;
}
.hs-card-img { aspect-ratio:4/3; overflow:hidden; }
.hs-card-img img {
  transition:transform .7s var(--eo);
  width:100%; height:100%; object-fit:cover; display:block;
}
.hs-card:hover .hs-card-img img { transform:scale(1.06); }
.hs-card-info {
  padding:1.1rem 1.3rem 1.3rem;
  background:var(--bg2);
  border-top:1px solid var(--line);
}
.hs-card-title {
  font-family:var(--fd); font-size:.95rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:.3rem;
}
.hs-card-sub { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink3); }
.hs-card-overlay {
  position:absolute; inset:0;
  background:rgba(13,13,11,0);
  transition:background .35s;
  display:flex; align-items:center; justify-content:center;
}
.hs-card:hover .hs-card-overlay { background:rgba(13,13,11,.25); }
.hs-zoom {
  width:42px; height:42px; border-radius:2px;
  background:var(--acc); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  opacity:0; transform:scale(.5);
  transition:opacity .3s, transform .3s var(--es);
}
.hs-card:hover .hs-zoom { opacity:1; transform:scale(1); }

/* ── LIGHTBOX ────────────────────────────────── */
#lb {
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#lb.active { opacity:1; pointer-events:all; }
.lb-bg { position:absolute; inset:0; background:rgba(8,8,6,.97); }
.lb-inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  max-width:92vw;
}
#lbImg {
  max-width:88vw; max-height:78vh; object-fit:contain;
  border:1px solid var(--line);
  display:block; transform:scale(.95); transition:transform .4s var(--eo);
}
#lb.active #lbImg { transform:scale(1); }
.lb-bar { display:flex; align-items:center; justify-content:space-between; width:100%; gap:2rem; }
.lb-text-wrap { flex:1; min-width:0; }
#lbTitle { font-family:var(--fd); font-size:1.05rem; font-weight:700; color:var(--ink); }
#lbCat   { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc2); margin-top:.3rem; }
.lb-controls { display:flex; align-items:center; gap:.8rem; }
#lbCounter { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3); }
.lb-btn {
  width:38px; height:38px; border-radius:2px;
  border:1px solid var(--line2); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  transition:background .3s, border-color .3s;
}
.lb-btn:hover { background:var(--acc); border-color:var(--acc); }
#lbClose {
  position:absolute; top:-3rem; right:0;
  width:34px; height:34px; border-radius:2px;
  border:1px solid var(--line2); color:var(--ink); font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
#lbClose:hover { background:var(--bg3); }

/* ── FOOTER ─────────────────────────────────── */
footer {
  padding:2.5rem 5vw;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  background:var(--bg2);
}
.fl { font-family:var(--fd); font-size:1rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.fc { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); }
.flinks { display:flex; gap:2rem; }
.flinks a { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); transition:color .3s; }
.flinks a:hover { color:var(--acc2); }

/* ── REVEAL UTILS ────────────────────────────── */
.sr  { opacity:0; transform:translateY(40px); }
.srl { opacity:0; transform:translateX(-30px); }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:900px) { .hs-card { width:clamp(240px,55vw,380px); } }
@media (max-width:768px) {
  .n-links, .n-right { display:none; }
  .burger { display:flex; }
  footer { flex-direction:column; text-align:center; }
  .hs-card { width:80vw; }
  .hs-head { flex-direction:column; align-items:flex-start; gap:1rem; }
}