/* =========================================================
   OLFA — Campaign Proposal
   Design system built from brand refs:
   espresso brown · caramel · warm beige · terracotta accent
   ========================================================= */

:root{
  --espresso:#2b1d12;
  --espresso-2:#3b2a1b;
  --coffee:#6f4e32;
  --caramel:#b07d4e;
  --caramel-soft:#c89a6b;
  --terracotta:#c0693f;
  --beige:#e8ddcc;
  --cream:#f6efe4;
  --cream-2:#efe5d6;
  --ink:#2b1d12;
  --muted:#7a6650;

  --font-ar:"Alexandria","Tajawal",system-ui,sans-serif;
  --font-ar-soft:"Tajawal","Alexandria",sans-serif;
  --font-serif:"Cormorant Garamond",serif;

  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ar);
  background:var(--cream);
  color:var(--ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== Logo mark ===== */
.logo-mark{width:30px;height:30px;color:var(--caramel);flex:none}
.logo-mark--lg{width:56px;height:56px}
.logo-mark--xl{width:72px;height:72px}
.logo-word{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:.22em;
  font-size:1.5rem;
  color:var(--espresso);
}
.logo-word--lg{font-size:2rem;color:var(--cream)}
.logo-word--xl{font-size:3rem;color:var(--espresso)}
.logo-desc{
  font-family:var(--font-serif);
  letter-spacing:.42em;
  font-size:.72rem;
  color:var(--coffee);
  text-transform:uppercase;
}

/* ===== Scroll progress ===== */
.scroll-progress{
  position:fixed;top:0;right:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--terracotta),var(--caramel));
  z-index:1000;transition:width .1s linear;
}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;inset-inline:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem clamp(1.1rem,4vw,3rem);
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(246,239,228,.92);
  backdrop-filter:blur(14px);
  padding:.75rem clamp(1.1rem,4vw,3rem);
  box-shadow:0 8px 30px rgba(43,29,18,.08);
}
.nav__logo{display:flex;align-items:center;gap:.6rem}
.nav:not(.is-scrolled) .nav__logo .logo-word{color:var(--cream)}
.nav:not(.is-scrolled) .logo-mark{color:var(--caramel-soft)}
.nav__links{display:flex;gap:1.9rem;font-size:.95rem;font-weight:500}
.nav__links a{position:relative;color:var(--cream);transition:color .3s;opacity:.9}
.nav.is-scrolled .nav__links a{color:var(--coffee)}
.nav__links a::after{
  content:"";position:absolute;bottom:-5px;right:0;width:0;height:2px;
  background:var(--terracotta);transition:width .3s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:2px;background:var(--cream);transition:.3s}
.nav.is-scrolled .nav__toggle span{background:var(--coffee)}

/* ===== Hero ===== */
.hero{position:relative;height:100vh;min-height:620px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__bg{
  position:absolute;inset:-8% 0;
  background:url("assets/venue.jpg") center/cover no-repeat;
  will-change:transform;z-index:1;
}
.hero__veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(43,29,18,.55) 0%,rgba(43,29,18,.25) 40%,rgba(43,29,18,.78) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(43,29,18,.4) 100%);
}
.hero__inner{position:relative;z-index:3;text-align:center;padding:0 1.4rem;max-width:860px}
.hero__eyebrow{
  color:var(--caramel-soft);letter-spacing:.14em;font-size:.82rem;font-weight:500;
  margin-bottom:1.6rem;text-transform:uppercase;
}
.hero__tagline{
  color:var(--cream);font-weight:700;line-height:1.35;
  font-size:clamp(2.4rem,7vw,5rem);
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero__tagline span{font-family:var(--font-serif);color:var(--caramel-soft);font-weight:600;letter-spacing:.04em}
.hero__sub{
  color:rgba(246,239,228,.9);font-family:var(--font-ar-soft);font-weight:300;
  font-size:clamp(1rem,2.4vw,1.35rem);margin:1.6rem auto 2.4rem;max-width:620px;
}
.hero__cta{
  display:inline-block;padding:.95rem 2.6rem;border-radius:50px;
  background:var(--terracotta);color:var(--cream);font-weight:600;font-size:1rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
  box-shadow:0 14px 34px rgba(192,105,63,.4);
}
.hero__cta:hover{transform:translateY(-3px);background:#cf7549;box-shadow:0 20px 44px rgba(192,105,63,.5)}

.scroll-hint{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scroll-hint__dot{width:22px;height:38px;border:2px solid rgba(246,239,228,.6);border-radius:14px;position:relative}
.scroll-hint__dot::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;border-radius:3px;background:var(--cream);animation:scrollDot 1.8s infinite}
.scroll-hint__label{color:rgba(246,239,228,.75);font-size:.72rem;letter-spacing:.1em}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,14px)}100%{opacity:0}}

/* ===== Sections base ===== */
.section{padding:clamp(4.5rem,10vw,8rem) clamp(1.1rem,4vw,2rem);position:relative}
.section__wrap{max-width:var(--wrap);margin:0 auto}
.tag{
  display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;
  color:var(--terracotta);background:rgba(192,105,63,.1);
  padding:.4rem 1rem;border-radius:40px;margin-bottom:1.4rem;
}
.tag--light{color:var(--caramel-soft);background:rgba(200,154,107,.14)}
.section__title{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;line-height:1.3;color:var(--espresso)}
.section__title--light{color:var(--cream)}
.section__lead{font-family:var(--font-ar-soft);font-weight:300;font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--muted);max-width:640px;margin-top:1.1rem}
.section__lead--light{color:rgba(246,239,228,.78)}
.block-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;color:inherit;margin:3.2rem 0 1.2rem}
.block-title--center{text-align:center;margin-top:4rem}

/* ===== The Big Idea ===== */
.idea{background:var(--cream);text-align:center}
.idea__title{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700;color:var(--espresso);margin-bottom:1.8rem}
.idea__body{max-width:680px;margin:0 auto;font-family:var(--font-ar-soft);font-weight:300;
  font-size:clamp(1.05rem,2.3vw,1.3rem);color:var(--coffee)}
.idea__body p{margin-bottom:1.1rem}
.idea__accent{font-family:var(--font-ar);font-weight:700;color:var(--terracotta);font-size:1.4em;margin:.4rem 0 1.3rem}
.idea__pillars{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:3.4rem}
.pillar{background:var(--cream-2);border:1px solid rgba(176,125,78,.2);border-radius:18px;
  padding:1.6rem 2.2rem;min-width:180px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pillar:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,29,18,.1)}
.pillar__num{display:block;font-size:1.5rem;font-weight:700;color:var(--espresso);margin-bottom:.3rem}
.pillar__txt{font-size:.95rem;color:var(--muted)}

/* ===== Overview / timeline ===== */
.overview{background:var(--cream-2)}
.timeline{position:relative;margin-top:3.6rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.timeline__line{position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:linear-gradient(var(--caramel),var(--terracotta));transform:translateX(-50%);opacity:.4}
.phase-card{background:var(--cream);border-radius:22px;padding:2.4rem;border:1px solid rgba(176,125,78,.18);
  box-shadow:0 10px 40px rgba(43,29,18,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.phase-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(43,29,18,.12)}
.phase-card__index{font-size:.85rem;font-weight:600;letter-spacing:.12em;color:var(--terracotta);margin-bottom:.8rem}
.phase-card__name{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;color:var(--espresso)}
.phase-card__en{font-family:var(--font-serif);letter-spacing:.12em;color:var(--caramel);font-size:.95rem;margin:.3rem 0 1rem}
.phase-card__desc{font-family:var(--font-ar-soft);font-weight:300;color:var(--coffee)}
.phase-card__link{display:inline-block;margin-top:1.3rem;color:var(--terracotta);font-weight:600;transition:letter-spacing .3s}
.phase-card__link:hover{letter-spacing:.03em}

/* ===== Phase 1 (dark, cinematic) ===== */
.phase1{background:
  linear-gradient(180deg,rgba(43,29,18,.97),rgba(30,20,12,.98)),
  url("assets/venue.jpg") center/cover fixed;color:var(--cream)}
.film-concept{max-width:760px;margin-top:1.4rem}
.film-concept__text{font-family:var(--font-ar-soft);font-weight:300;font-size:1.15rem;color:rgba(246,239,228,.82)}
.film-concept__text strong{color:var(--caramel-soft);font-family:var(--font-ar);font-weight:700}

.storyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.4rem}
.scene{border-radius:16px;overflow:hidden;background:rgba(246,239,228,.04);
  border:1px solid rgba(200,154,107,.16);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.scene:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.scene__frame{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene__frame::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1px);background-size:4px 4px;opacity:.5;mix-blend-mode:overlay}
.scene__frame[data-scene="01"]{background:linear-gradient(135deg,#8a5a38,#4a3120)}
.scene__frame[data-scene="02"]{background:linear-gradient(135deg,#b07d4e,#6f4a2c)}
.scene__frame[data-scene="03"]{background:linear-gradient(135deg,#9c6b45,#5a3a24)}
.scene__frame[data-scene="04"]{background:linear-gradient(135deg,#7a5234,#3f2918)}
.scene__frame[data-scene="05"]{background:linear-gradient(135deg,#c0693f,#7a3d24)}
.scene__frame--brand{background:linear-gradient(135deg,#2b1d12,#160e07);flex-direction:column;gap:.4rem;color:var(--caramel-soft)}
.scene__num{font-family:var(--font-serif);font-size:3.6rem;font-weight:600;color:rgba(246,239,228,.85);z-index:1;
  transition:transform .5s var(--ease)}
.scene:hover .scene__num{transform:scale(1.12)}
.scene__meta{padding:1.3rem 1.4rem 1.6rem}
.scene__meta h4{font-size:1.2rem;font-weight:700;color:var(--cream);margin-bottom:.5rem}
.scene__meta p{font-family:var(--font-ar-soft);font-weight:300;font-size:.95rem;color:rgba(246,239,228,.72);line-height:1.7}

.teaser{max-width:760px;margin-top:1rem}
.teaser__text{font-family:var(--font-ar-soft);font-weight:300;font-size:1.1rem;color:rgba(246,239,228,.82)}
.teaser__q{margin-top:1rem;font-size:1.15rem;color:var(--caramel-soft)}
.teaser__q em{font-style:normal;font-weight:700;color:var(--cream)}

/* ===== Deliverables ===== */
.deliverables{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.4rem}
.deliverables li{position:relative;padding:1.1rem 1.3rem 1.1rem 1.3rem;padding-inline-start:2.6rem;
  background:rgba(176,125,78,.1);border:1px solid rgba(176,125,78,.22);border-radius:14px;
  font-weight:500;font-size:1rem;transition:transform .3s var(--ease),background .3s}
.phase1 .deliverables li{background:rgba(246,239,228,.05);border-color:rgba(200,154,107,.2);color:rgba(246,239,228,.9)}
.deliverables li::before{content:"✦";position:absolute;inset-inline-start:1rem;top:1.05rem;color:var(--terracotta)}
.deliverables li:hover{transform:translateY(-4px)}

/* ===== Phase 2 cards ===== */
.phase2{background:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.info-card{background:var(--cream-2);border:1px solid rgba(176,125,78,.18);border-radius:22px;
  padding:2.2rem 1.8rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.info-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(43,29,18,.1)}
.info-card__icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--cream);background:linear-gradient(135deg,var(--terracotta),var(--caramel));margin-bottom:1.2rem}
.info-card h3{font-size:1.35rem;font-weight:700;color:var(--espresso);margin-bottom:.7rem}
.info-card>p{font-family:var(--font-ar-soft);font-weight:300;color:var(--coffee);margin-bottom:1.2rem}
.info-card ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.info-card li{position:relative;padding-inline-start:1.4rem;font-size:.95rem;color:var(--muted)}
.info-card li::before{content:"—";position:absolute;inset-inline-start:0;color:var(--caramel)}

/* ===== Journey ===== */
.journey{background:linear-gradient(180deg,var(--espresso),var(--espresso-2));color:var(--cream)}
.journey__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:3.2rem;position:relative}
.jstep{text-align:center;padding:1.6rem 1rem;border-radius:18px;background:rgba(246,239,228,.04);
  border:1px solid rgba(200,154,107,.16);transition:transform .4s var(--ease),background .4s}
.jstep:hover{transform:translateY(-8px);background:rgba(192,105,63,.14)}
.jstep__n{display:block;font-family:var(--font-serif);font-size:2.2rem;font-weight:600;color:var(--caramel-soft);margin-bottom:.5rem}
.jstep h4{font-size:1.1rem;font-weight:700;color:var(--cream);margin-bottom:.5rem}
.jstep p{font-family:var(--font-ar-soft);font-weight:300;font-size:.9rem;color:rgba(246,239,228,.68)}

/* ===== Closing ===== */
.closing{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;
  padding:6rem 1.4rem;text-align:center;overflow:hidden}
.closing__bg{position:absolute;inset:0;background:url("assets/venue.jpg") center/cover;filter:saturate(.85)}
.closing__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(246,239,228,.9),rgba(239,229,214,.97))}
.closing__inner{position:relative;z-index:2;max-width:760px}
.closing__line{font-family:var(--font-ar-soft);font-weight:300;font-size:clamp(1.2rem,3vw,1.8rem);color:var(--coffee)}
.closing__line--2{font-family:var(--font-ar);font-weight:700;color:var(--espresso);font-size:clamp(1.5rem,4vw,2.4rem);margin-top:.4rem}
.closing__logo{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:3rem 0}
.closing__tagline{font-size:clamp(2rem,6vw,4rem);font-weight:700;color:var(--espresso);line-height:1.4}
.closing__tagline span{font-family:var(--font-serif);color:var(--terracotta);font-weight:600}

/* ===== Footer ===== */
.footer{background:var(--espresso);color:rgba(246,239,228,.6);text-align:center;
  padding:2rem 1.4rem;font-size:.9rem;font-family:var(--font-ar-soft);font-weight:300}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}
.reveal[data-delay="4"]{transition-delay:.48s}
.reveal[data-delay="5"]{transition-delay:.6s}

/* ===== Responsive ===== */
@media(max-width:900px){
  .storyboard,.cards{grid-template-columns:repeat(2,1fr)}
  .journey__steps{grid-template-columns:repeat(2,1fr)}
  .phase1{background-attachment:scroll}
}
@media(max-width:720px){
  .nav__links{position:fixed;inset:0 0 0 35%;flex-direction:column;justify-content:center;gap:2rem;
    background:rgba(43,29,18,.97);backdrop-filter:blur(10px);padding:2rem;transform:translateX(100%);
    transition:transform .4s var(--ease);font-size:1.2rem}
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{color:var(--cream)!important}
  .nav.is-scrolled .nav__links a{color:var(--cream)!important}
  .nav__toggle{display:flex;z-index:10}
  .timeline{grid-template-columns:1fr}
  .timeline__line{display:none}
  .storyboard,.cards,.journey__steps{grid-template-columns:1fr}
  .idea__pillars{flex-direction:column;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
}