/* ============================================================
   JORANE CREATIONS — design tokens
   Display: Anton (blocky, condensed, does the shouting)
   Body:    Inter (quiet workhorse)
   Utility: Space Mono (eyebrows, numbers, labels — feels like a call-sheet)
   ============================================================ */
:root{
  --bg:            #0a0a0a;
  --bg-panel:      #121110;
  --bg-panel-2:    #1a1815;
  --line:          rgba(255,255,255,0.08);
  --text:          #f4f2ec;
  --text-dim:      #948f85;
  --text-faint:    #5b5750;
  --amber:         #f5a623;
  --amber-deep:    #c9791a;
  --amber-dim:     rgba(245,166,35,0.12);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Inter', -apple-system, sans-serif;
  --mono:    'Space Mono', monospace;

  --container: 1440px;
  --pad: clamp(24px, 5vw, 96px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--amber); color:#0a0a0a; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html{ scroll-behavior:auto; }
}

.top-bar{ height:3px; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); }

.eyebrow, .hero__eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 14px;
}
.eyebrow-line{ width:22px; height:2px; background: var(--amber); display:inline-block; }

.section-title{
  font-family: var(--display);
  font-weight:400;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.section-sub{ color: var(--text-dim); margin:0; }
.desktop-only{ display:inline-flex; }
@media (max-width: 720px){ .desktop-only{ display:none; } }

.link-arrow{
  font-family: var(--mono);
  font-size:13px;
  letter-spacing:0.08em;
  color: var(--text-dim);
  align-items:center;
  gap:6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.link-arrow:hover{ color: var(--amber); border-color: var(--amber); }
.arrow-up{ display:inline-block; transform: translateY(-1px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--solid{ background: var(--amber); color:#161206; font-weight:700; }
.btn--solid:hover{ background: #ffb746; }
.btn--outline{ border-color: var(--line); color: var(--text); background: transparent; }
.btn--outline:hover{ border-color: var(--amber); color: var(--amber); }
.btn--dark{ background: #14110a; color: var(--amber); }
.btn--dark:hover{ background:#000; }
.play-ico{ color: var(--amber); font-size: 10px; }

/* ============================================================ NAV */
.nav{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content: space-between;
  padding: 18px var(--pad);
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__mark{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.nav__jorane-logo{
    width:180px;
    height:auto;
    display:block;
    transition:.3s;
}

.nav__mark:hover .nav__jorane-logo{
    transform:scale(1.03);
}

@media(max-width:900px){

    .nav__jorane-logo{
        width:140px;
    }

}
.nav__links{ display:flex; gap: 34px; }
.nav__links a{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s;
}
.nav__links a:hover{ color: var(--amber); }
.nav__cta{ margin-left: 20px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav__burger span{ width:22px; height:2px; background: var(--text); }

@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ============================================================ HERO */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  transition: background-image .8s ease;
  filter: brightness(0.55) saturate(0.9);
  z-index:-2;
}
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.78) 38%, rgba(10,10,10,0.35) 68%, rgba(10,10,10,0.15) 100%);
  z-index:-1;
}
.hero__content{ padding: 0 var(--pad); max-width: 760px; }
.hero__eyebrow{ margin-bottom: 22px; }
.hero__title{ margin: 0 0 22px; font-family: var(--display); text-transform:uppercase; }
.hero__title .line{
  display:block;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.98;
}
.line--white{ color: var(--text); }
.line--amber{ color: var(--amber); }
.hero__desc{ color: var(--text-dim); font-size: 17px; max-width: 460px; margin-bottom: 34px; }
.hero__ctas{ display:flex; gap: 16px; flex-wrap: wrap; }

.hero__arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.35);
  color: var(--amber);
  font-size: 22px;
  display:flex; align-items:center; justify-content:center;
  z-index: 5;
  transition: border-color .2s, background .2s;
}
.hero__arrow:hover{ border-color: var(--amber); background: rgba(245,166,35,0.12); }
.hero__arrow--left{ left: 24px; }
.hero__arrow--right{ right: 24px; }
@media (max-width: 720px){ .hero__arrow{ display:none; } }

.hero__dots{
  position:absolute; right: 40px; top:50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap: 10px; z-index:5;
}
.hero__dots button{
  width: 3px; height: 26px; background: rgba(255,255,255,0.25); border:none; padding:0;
  transition: background .2s;
}
.hero__dots button.is-active{ background: var(--amber); }

/* ============================================================ MARQUEE */
.marquee{
  overflow:hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 20px 0;
}
.marquee__track{
  display:flex;
  gap: 56px;
  width: max-content;
  animation: scroll-left 32s linear infinite;
}
.marquee__track span{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  display:flex; align-items:center; gap: 56px;
  text-transform: uppercase;
}
.marquee__track span::after{ content:'\25C6'; color: var(--amber); margin-left:56px; font-size:8px; }
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================================ STATS */
.stats{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.stat{
  padding: 34px 20px;
  text-align:center;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat__num{
  display:block;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 42px);
  color: var(--amber);
}
.stat__label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 720px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n){ border-right:none; }
  .stat{ border-bottom: 1px solid var(--line); }
}

/* ============================================================ shared section spacing */
.works, .services, .about, .contact{
  padding: 100px var(--pad);
}
.section-head{
  display:flex; justify-content: space-between; align-items:flex-end;
  margin-bottom: 48px; gap: 24px; flex-wrap: wrap;
}

/* ============================================================ WORKS */
.works__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
@media (max-width:980px){
  .works__grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .works__grid{
    grid-template-columns:1fr;
  }
}
.work-card{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:border-color .3s ease;
  cursor:pointer;
}
.work-card:hover{
  border-color:var(--amber-deep);
}
.work-card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-panel-2);
}
.work-card__media img,
.work-card__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.work-card__media img{
  transition:transform .5s ease, opacity .4s ease;
}
.work-card__media video{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
}
.work-card:hover .work-card__media video{
  opacity:1;
}
.work-card:hover .work-card__media img{
  opacity:0;
  transform:scale(1.06);
}
.work-card__year{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--amber);
  color:#161206;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
}
.work-card__view{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0;

  background:var(--amber);
  color:#161206;

  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;

  padding:10px 18px;

  display:flex;
  align-items:center;
  gap:6px;

  transition:.3s ease;
}
.work-card:hover .work-card__view{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.work-card__body{
  padding:18px 20px 22px;
}
.work-card__client{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:6px;
}
.work-card__title{
  font-size:18px;
  font-weight:700;
  margin:0 0 12px;
}
.work-card__tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.work-card__tags span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);

  border:1px solid var(--line);
  padding:3px 8px;
}

/* ============================================================
   SERVICES
============================================================ */

.services{
  padding:120px var(--pad);
}

.services__hint{
  margin:12px 0 48px;
  color:var(--text-dim);
}

.services__body{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:start;
}

@media (max-width:980px){
  .services__body{
    grid-template-columns:1fr;
    gap:40px;
  }
}
.services__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}

.services__list li{
  display:flex;
  align-items:center;
  gap:22px;
  padding:24px 20px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:.35s ease;
}

.services__list li:hover,
.services__list li.is-active{
  background:rgba(255,176,0,.05);
  border-left:4px solid var(--amber);
  padding-left:30px;
}

.services__num{
  width:48px;
  font-family:var(--display);
  font-size:28px;
  color:var(--text-faint);
  transition:.3s;
}

.services__list li:hover .services__num,
.services__list li.is-active .services__num{
  color:var(--amber);
}

.services__name{
  flex:1;
}

.services__name strong{
  display:block;
  font-family:var(--display);
  font-size:24px;
  line-height:1.2;
  color:var(--text);
  margin-bottom:8px;
}

.services__name small{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.8;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
}

.services__go{
  font-size:22px;
  color:var(--amber);
  opacity:0;
  transform:translateX(-10px);
  transition:.3s;
}

.services__list li:hover .services__go,
.services__list li.is-active .services__go{
  opacity:1;
  transform:translateX(0);
}
.services__preview{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:36px;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
}

..services__preview-thumb{
  width:100%;
  max-width:340px;          /* controls poster width */
  aspect-ratio:2/3;         /* portrait */
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:18px;
  margin:0 auto 30px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,176,0,.08);
  transition:
    transform .45s ease,
    box-shadow .45s ease;
}

.services__preview:hover .services__preview-thumb{
  transform:translateY(-6px) scale(1.02);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 35px rgba(255,176,0,.15);
}

.services__preview-glyph{
  position:absolute;
  top:20px;
  right:28px;
  font-family:var(--display);
  font-size:120px;
  line-height:1;
  color:rgba(255,176,0,.08);
  user-select:none;
  pointer-events:none;
}

.services__preview-copy{
  position:relative;
  z-index:2;
}

.services__preview-tag{
  margin:0 0 16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
}

.services__preview-desc{
  margin:0 0 24px;
  font-size:18px;
  line-height:1.8;
  color:var(--text-dim);
}

.services__preview-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.services__preview-tags span{
  padding:7px 14px;
  border:1px solid var(--amber-deep);
  border-radius:50px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
  transition:.3s ease;
}

.services__preview-tags span:hover{
  background:var(--amber);
  color:#111;
}
@media (max-width:768px){

  .services__preview{
    padding:24px;
  }

  .services__preview-thumb{
    max-width:260px;
  }

  .services__preview-glyph{
    font-size:70px;
  }

  .services__name strong{
    font-size:20px;
  }

  .services__preview-desc{
    font-size:16px;
  }

}

/* ============================================================
   CLIENTS
============================================================ */

.clients{
    padding:120px var(--pad);
}

.clients__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:60px;
}

.client-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    height:150px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:25px;

    transition:.35s ease;
}

.client-card:hover{
    border-color:var(--amber);
    transform:translateY(-6px);
    background:var(--bg-panel-2);
}

.client-card img{
    max-width:140px;
    max-height:70px;
    width:auto;
    height:auto;
    object-fit:contain;

    filter:grayscale(100%);
    opacity:.7;

    transition:.35s;
}

.client-card:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.08);
}

@media(max-width:1000px){

    .clients__grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:700px){

    .clients__grid{
        grid-template-columns:1fr;
    }

}

/* ============================================================
   WHY JORANE CREATIONS
============================================================ */

.why{
    padding:120px var(--pad);
}

.why .section-title{
    margin-bottom:18px;
}

.why__content{
    max-width:900px;
    margin-top:48px;
}

.why__lead{
    font-size:24px;
    line-height:1.8;
    color:var(--text);
    margin:0 0 32px;
}

.why__content p{
    font-size:17px;
    line-height:1.9;
    color:var(--text-dim);
    margin:0 0 28px;
}

.why__points{
    margin-top:48px;
    padding-left:22px;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 60px;
}

.why__points li{
    color:var(--text);
    line-height:1.8;
    padding-left:4px;
}

.why__points li::marker{
    color:var(--amber);
}

@media(max-width:900px){

    .why{
        padding:100px var(--pad);
    }

    .why__content{
        margin-top:40px;
    }

    .why__lead{
        font-size:21px;
    }

    .why__points{
        grid-template-columns:1fr;
        gap:14px;
    }

}
/* ============================================================ CTA */
.cta{
  position:relative;
  background: linear-gradient(135deg, #ffb746, var(--amber) 55%, var(--amber-deep));
  color: #161206;
  padding: 130px var(--pad);
  text-align:center;
  overflow:hidden;
}
.cta__eyebrow{
  font-family: var(--mono); font-size:12px; letter-spacing:0.2em;
  color: rgba(20,15,5,0.6); margin:0 0 18px; text-transform:uppercase;
}
.cta__title{
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 76px);
  line-height:1.02;
  margin: 0 0 20px;
  position:relative; z-index:2;
}
.cta__watermark{
  position:absolute; left:50%; top:52%; transform: translate(-50%,-50%);
  font-family: var(--display);
  font-size: clamp(90px, 18vw, 260px);
  color: rgba(20,15,5,0.08);
  white-space:nowrap;
  z-index:1;
  pointer-events:none;
}
.cta__sub{ position:relative; z-index:2; max-width: 480px; margin: 0 auto 34px; color: rgba(20,15,5,0.72); }
.cta__actions{ position:relative; z-index:2; display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; }
.cta__email{ font-family: var(--mono); text-decoration: underline; }

/* ============================================================ CONTACT + MAP */
.contact__grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px;
  margin-bottom: 56px;
}
@media (max-width: 900px){ .contact__grid{ grid-template-columns: 1fr; } }

.contact__form{ display:flex; flex-direction:column; gap: 18px; margin-top: 28px; max-width: 520px; }
.contact__form label{ display:flex; flex-direction:column; gap:8px; }
.contact__form span{
  font-family: var(--mono); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim);
}
.contact__form input, .contact__form textarea{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 15px;
  resize: vertical;
  transition: border-color .2s;
}
.contact__form input:focus, .contact__form textarea:focus{
  outline: none;
  border-color: var(--amber);
}
.contact__submit{ align-self: flex-start; margin-top: 6px; border:none; }
.contact__status{ font-family: var(--mono); font-size: 12px; color: var(--amber); min-height: 16px; margin:0; }

.contact__info{ display:flex; flex-direction:column; gap: 30px; padding-top: 28px; }
.contact__block h3{
  font-family: var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--amber); margin: 0 0 10px;
}
.contact__block p{ margin: 0 0 4px; color: var(--text-dim); }
.contact__block a:hover{ color: var(--amber); }
.contact__note{ font-size:11px; font-style: italic; color: var(--text-faint) !important; }
.contact__social{ display:flex; gap: 18px; }
.contact__social a{ font-family: var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--line); padding-bottom:2px; }
.contact__social a:hover{ border-color: var(--amber); }

.contact__map{
  width:100%;
  height:420px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  filter:grayscale(.4) contrast(1.05);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--bg-panel); color: var(--text); }
.leaflet-popup-content{ font-family: var(--body); }

/* ============================================================ FOOTER */
.footer{
  border-top:1px solid var(--line);
  padding:48px var(--pad) 24px;
}

.footer__top{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}

.footer__logo{
  display:flex;
  justify-content:center;
  align-items:center;
}

.footer__logo-img{
  width:180px;
  height:auto;
  display:block;
  transition:transform .3s ease;
}

.footer__logo:hover .footer__logo-img{
  transform:scale(1.03);
}

.footer__address{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-faint);
  text-align:center;
  margin:0;
}

.footer__nav{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.footer__nav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  transition:.3s;
}

.footer__nav a:hover{
  color:var(--amber);
}

.footer__contact{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:right;
}

.footer__contact a{
  color:var(--text-dim);
}

.footer__contact a:hover{
  color:var(--amber);
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:20px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-faint);
}

@media(max-width:900px){

  .footer__top{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer__logo-img{
    width:140px;
  }

  .footer__contact{
    text-align:center;
  }

}

@media(max-width:600px){

  .footer__bottom{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }

}
/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }