/* ============================================================
   KARTEL MUSIC GROUP — Official Website
   Global Stylesheet · Arabic (RTL) · Multi-page
   ------------------------------------------------------------
   Palette  : Black / Silver / Warm Gold (from KM logo)
   Fonts    : Alexandria (display) + Tajawal (body)
   Motion   : loader, page enter/exit, scroll reveal,
              nav slide-in, card hover, counters, marquee
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@200;300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ---------- 1. Design Tokens ---------- */
:root{
  /* Color */
  --c-black:        #0A0A0A;
  --c-black-2:      #0E0E0E;
  --c-ink:          #141414;
  --c-ink-2:        #1B1B1B;
  --c-ink-3:        #232323;
  --c-silver:       #C8C8C8;
  --c-silver-dim:   #8A8A8A;
  --c-white:        #F4F3F0;
  --c-gold:         #B89B72;
  --c-gold-2:       #D9C29C;
  --c-gold-soft:    rgba(184,155,114,.14);
  --c-line:         rgba(200,200,200,.12);
  --c-line-2:       rgba(200,200,200,.22);

  /* Type */
  --font-display:   'Alexandria','Tajawal',system-ui,sans-serif;
  --font-body:      'Tajawal','Alexandria',system-ui,sans-serif;

  /* Layout */
  --container:      1240px;
  --gutter:         28px;
  --nav-h:          86px;
  --radius:         6px;
  --radius-lg:      16px;

  /* Motion */
  --ease:           cubic-bezier(.22,1,.36,1);
  --ease-soft:      cubic-bezier(.4,0,.2,1);
  --dur:            .7s;
  --dur-fast:       .35s;

  /* Shadow */
  --shadow-card:    0 30px 60px -30px rgba(0,0,0,.85);
  --shadow-gold:    0 0 0 1px rgba(184,155,114,.35), 0 24px 60px -28px rgba(184,155,114,.35);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.9;
  color:var(--c-silver);
  background:var(--c-black);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--c-gold); color:var(--c-black); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--c-black); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--c-gold), #6e5a3c);
  border-radius:20px;
  border:2px solid var(--c-black);
}

/* Headings */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.35;
  color:var(--c-white);
  letter-spacing:-.01em;
}

/* ---------- 3. Layout Helpers ---------- */
.container{
  width:min(100% - (var(--gutter) * 2), var(--container));
  margin-inline:auto;
}

.section{
  position:relative;
  padding-block:clamp(72px, 10vw, 130px);
}

.section--tight{ padding-block:clamp(56px, 7vw, 90px); }
.section--dark{ background:var(--c-black-2); }

.section__head{
  max-width:720px;
  margin-block-end:clamp(40px, 5vw, 64px);
}
.section__head--center{
  margin-inline:auto;
  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-gold);
  margin-block-end:18px;
}
.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:var(--c-gold);
  opacity:.8;
}

.section__title{
  font-size:clamp(28px, 3.6vw, 46px);
  font-weight:600;
  margin-block-end:18px;
}
.section__title em{
  font-style:normal;
  color:var(--c-gold);
}

.section__desc{
  font-size:clamp(15px, 1.3vw, 17.5px);
  color:var(--c-silver-dim);
  line-height:2;
}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--c-white);
  --btn-bd:var(--c-line-2);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 34px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:100px;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg, var(--c-gold), var(--c-gold-2));
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .5s var(--ease);
}
.btn:hover{
  color:var(--c-black);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(184,155,114,.55);
}
.btn:hover::after{ transform:scaleX(1); }
.btn:active{ transform:translateY(0); }

.btn--gold{
  --btn-bg:linear-gradient(120deg, var(--c-gold), var(--c-gold-2));
  --btn-fg:var(--c-black);
  --btn-bd:transparent;
}
.btn--gold::after{ background:var(--c-white); }
.btn--gold:hover{ color:var(--c-black); }

.btn--sm{ padding:11px 24px; font-size:13.5px; }

/* Text link with arrow */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:500;
  color:var(--c-gold);
  transition:gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link-arrow svg{ width:18px; height:18px; transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover{ gap:16px; color:var(--c-gold-2); }

/* ---------- 5. Loader ---------- */
.loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:34px;
  background:var(--c-black);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader__logo{
  width: 150px;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  animation: loaderLogo 1s var(--ease) .15s forwards;
}
.loader__wave{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
}
.loader__wave span{
  width:3px;
  border-radius:3px;
  background:linear-gradient(var(--c-gold-2), var(--c-gold));
  animation:wave 1.1s var(--ease-soft) infinite;
}
.loader__wave span:nth-child(1){ animation-delay:0s;    height:14px; }
.loader__wave span:nth-child(2){ animation-delay:.12s;  height:26px; }
.loader__wave span:nth-child(3){ animation-delay:.24s;  height:38px; }
.loader__wave span:nth-child(4){ animation-delay:.36s;  height:26px; }
.loader__wave span:nth-child(5){ animation-delay:.48s;  height:14px; }

@keyframes loaderLogo{
  to{ opacity:1; transform:none; }
}
@keyframes wave{
  0%,100%{ transform:scaleY(.45); opacity:.5; }
  50%    { transform:scaleY(1);   opacity:1;  }
}

/* ---------- 6. Page Enter / Exit ---------- */
.page{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.is-ready .page{
  opacity:1;
  transform:none;
}
body.is-leaving .page{
  opacity:0;
  transform:translateY(-14px);
}
body.is-leaving .loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .35s var(--ease);
}

/* ---------- 7. Navigation ---------- */
.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:900;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:linear-gradient(180deg, rgba(10,10,10,.9), rgba(10,10,10,0));
  transition:background .5s var(--ease), height .5s var(--ease),
             border-color .5s var(--ease), backdrop-filter .5s;
  border-block-end:1px solid transparent;
}
.nav.is-scrolled{
  height:calc(var(--nav-h) - 14px);
  background:rgba(10,10,10,.82);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-block-end-color:var(--c-line);
}
.nav__inner{
  width:min(100% - (var(--gutter) * 2), var(--container));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:24px;
  justify-content:space-between;
}
.nav__logo {
  position: relative;
  z-index: 890;
}
.nav__logo img{
  width: 90px; 
  transition: transform .5s var(--ease);
}
.nav__logo:hover img{ transform: scale(1.05); }

.nav__menu{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav__link{
  position:relative;
  display:inline-block;
  padding:10px 16px;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:400;
  color:var(--c-silver);
  transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  inset-block-end:4px;
  inset-inline:16px;
  height:1px;
  background:var(--c-gold);
  transform:scaleX(0);
  transform-origin:inline-end;
  transition:transform .45s var(--ease);
}
.nav__link:hover{ color:var(--c-white); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--c-gold); }
.nav__link.is-active::after{ transform:scaleX(1); }

.nav__cta{ margin-inline-start:14px; }

/* Burger */
.nav__burger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  border:1px solid var(--c-line-2);
  border-radius:50%;
  transition:border-color .3s, background .3s;
}
.nav__burger span{
  position:absolute;
  inset-inline:12px;
  height:1.5px;
  background:var(--c-white);
  border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1){ top:16px; }
.nav__burger span:nth-child(2){ top:21.5px; }
.nav__burger span:nth-child(3){ top:27px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-block:calc(var(--nav-h) + 40px) 60px;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.12);
  filter:grayscale(.35) brightness(.5);
  animation:heroZoom 12s var(--ease) forwards;
}
@keyframes heroZoom{
  to{ transform:scale(1); }
}
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(184,155,114,.16), transparent 55%),
    linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 45%, rgba(10,10,10,.35) 100%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 30%, rgba(10,10,10,.9) 100%);
}

.hero__content{
  max-width:820px;
}
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 18px;
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-gold-2);
  border:1px solid var(--c-line-2);
  border-radius:100px;
  background:rgba(184,155,114,.06);
  margin-block-end:28px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s;
}
.hero__eyebrow::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 4px rgba(184,155,114,.18);
  animation:pulseDot 2.4s var(--ease-soft) infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 3px rgba(184,155,114,.16); }
  50%    { box-shadow:0 0 0 8px rgba(184,155,114,.04); }
}

.hero__title{
  font-size:clamp(34px, 5.6vw, 76px);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.02em;
  margin-block-end:26px;
}
.hero__line{
  display:block;
  overflow:hidden;
  padding-block-end:4px;
}
.hero__line > span{
  display:block;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease);
}
.hero__line:nth-child(1) > span{ transition-delay:.35s; }
.hero__line:nth-child(2) > span{ transition-delay:.47s; }
.hero__line:nth-child(3) > span{ transition-delay:.59s; }

.hero__line em{
  font-style:normal;
  background:linear-gradient(100deg, var(--c-gold-2), var(--c-gold) 55%, #8a7048);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__sub{
  max-width:600px;
  font-size:clamp(15.5px, 1.4vw, 18.5px);
  color:var(--c-silver-dim);
  line-height:2;
  margin-block-end:40px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--ease) .8s, transform .9s var(--ease) .8s;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--ease) .95s, transform .9s var(--ease) .95s;
}

/* Hero ready state */
.is-ready .hero__eyebrow,
.is-ready .hero__sub,
.is-ready .hero__actions{
  opacity:1;
  transform:none;
}
.is-ready .hero__line > span{ transform:none; }

/* Scroll hint */
.hero__scroll{
  position:absolute;
  inset-block-end:34px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-silver-dim);
  opacity:0;
  transition:opacity 1s var(--ease) 1.4s;
}
.is-ready .hero__scroll{ opacity:.85; }
.hero__scroll::after{
  content:"";
  width:1px;
  height:52px;
  background:linear-gradient(var(--c-gold), transparent);
  animation:scrollLine 2s var(--ease-soft) infinite;
}
@keyframes scrollLine{
  0%  { transform:scaleY(0); transform-origin:top; }
  50% { transform:scaleY(1); transform-origin:top; }
  51% { transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- 9. Page Header (inner pages) ---------- */
.page-head{
  position:relative;
  padding-block:calc(var(--nav-h) + 88px) 72px;
  overflow:hidden;
  border-block-end:1px solid var(--c-line);
}
.page-head__bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.page-head__bg img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.5) brightness(.32);
}
.page-head__bg::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 90% 0%, rgba(184,155,114,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,.82), var(--c-black) 92%);
}
.page-head__title{
  font-size:clamp(30px, 4.6vw, 58px);
  font-weight:600;
  line-height:1.25;
  margin-block-end:16px;
}
.page-head__desc{
  max-width:620px;
  color:var(--c-silver-dim);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--c-silver-dim);
  margin-block-end:26px;
}
.breadcrumb a:hover{ color:var(--c-gold); }
.breadcrumb span{ opacity:.4; }

/* ---------- 10. Stats / Counters ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--c-line);
  border-block:1px solid var(--c-line);
}
.stat{
  background:var(--c-black);
  padding:clamp(26px, 4vw, 46px) 24px;
  text-align:center;
  transition:background .5s var(--ease);
}
.stat:hover{ background:var(--c-ink); }
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(30px, 3.4vw, 46px);
  font-weight:600;
  line-height:1;
  color:var(--c-white);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
}
.stat__num b{ color:var(--c-gold); font-weight:600; }
.stat__label{
  margin-block-start:10px;
  font-size:13.5px;
  color:var(--c-silver-dim);
  letter-spacing:.02em;
}

/* ---------- 11. Service Cards ---------- */
.grid{
  display:grid;
  gap:22px;
}
.grid--2{ grid-template-columns:repeat(2, 1fr); }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

.card{
  position:relative;
  padding:clamp(26px, 3vw, 38px);
  background:linear-gradient(160deg, var(--c-ink), var(--c-black-2));
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  transition:transform .6s var(--ease), border-color .6s var(--ease),
             box-shadow .6s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 120% at 100% 0%, rgba(184,155,114,.12), transparent 55%);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.card::after{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--c-gold), transparent);
  transform:scaleX(0);
  transition:transform .6s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--c-line-2);
  box-shadow:var(--shadow-card);
}
.card:hover::before{ opacity:1; }
.card:hover::after{ transform:scaleX(1); }

.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  border-radius:14px;
  background:var(--c-gold-soft);
  border:1px solid rgba(184,155,114,.28);
  color:var(--c-gold-2);
  margin-block-end:22px;
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.card__icon svg{ width:26px;height:26px; }
.card:hover .card__icon{
  transform:translateY(-3px) rotate(-4deg);
  background:rgba(184,155,114,.22);
}

.card__num{
  position:absolute;
  inset-block-start:18px;
  inset-inline-end:24px;
  font-family:var(--font-display);
  font-size:52px;
  font-weight:700;
  line-height:1;
  color:rgba(200,200,200,.06);
  transition:color .6s var(--ease);
}
.card:hover .card__num{ color:rgba(184,155,114,.16); }

.card__title{
  font-size:clamp(17px, 1.5vw, 20px);
  margin-block-end:12px;
}
.card__text{
  font-size:15px;
  color:var(--c-silver-dim);
  line-height:1.95;
}

/* ---------- 12. Values band ---------- */
.values{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.value{
  background:var(--c-black-2);
  padding:clamp(30px, 4vw, 52px) clamp(22px, 3vw, 40px);
  text-align:center;
  transition:background .5s var(--ease);
}
.value:hover{ background:var(--c-ink); }
.value__index{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--c-gold);
  opacity:.8;
}
.value__title{
  font-size:clamp(20px, 2vw, 26px);
  margin-block:14px 12px;
}
.value__text{
  font-size:14.5px;
  color:var(--c-silver-dim);
  line-height:1.9;
}

/* ---------- 13. Artist Cards ---------- */
.artists{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.artist{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--c-line);
  transition:border-color .6s var(--ease), transform .6s var(--ease);
}
.artist img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.6) brightness(.72);
  transition:transform 1s var(--ease), filter .8s var(--ease);
}
.artist::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(10,10,10,.92) 100%);
  transition:opacity .6s var(--ease);
}
.artist__body{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  z-index:2;
  padding:26px;
  transform:translateY(10px);
  transition:transform .6s var(--ease);
}
.artist__name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--c-white);
}
.artist__meta{
  font-size:13px;
  color:var(--c-gold-2);
  letter-spacing:.04em;
  margin-block-start:4px;
  opacity:.9;
}
.artist:hover{
  transform:translateY(-6px);
  border-color:rgba(184,155,114,.4);
}
.artist:hover img{
  transform:scale(1.07);
  filter:grayscale(.15) brightness(.85);
}
.artist:hover .artist__body{ transform:none; }

/* ---------- 14. Marquee ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  padding-block:26px;
  border-block:1px solid var(--c-line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  gap:64px;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--font-display);
  font-size:clamp(18px, 2vw, 26px);
  font-weight:500;
  color:rgba(200,200,200,.4);
  white-space:nowrap;
  transition:color .4s var(--ease);
}
.marquee__item::after{
  content:"◆";
  font-size:10px;
  color:var(--c-gold);
  opacity:.6;
}
.marquee__item:hover{ color:var(--c-white); }
@keyframes marquee{
  to{ transform:translateX(50%); } /* RTL: moves right → seamless */
}

/* ---------- 15. Split / Feature rows ---------- */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px, 5vw, 80px);
  align-items:center;
}
.split--reverse .split__media{ order:2; }

.split__media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:5/4;
  border:1px solid var(--c-line);
}
.split__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.4) brightness(.8);
  transition:transform 1.2s var(--ease);
}
.split__media:hover img{ transform:scale(1.05); }
.split__media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(140deg, rgba(184,155,114,.12), transparent 45%, rgba(10,10,10,.4));
  pointer-events:none;
}

.split__body .section__title{ margin-block-end:20px; }
.split__body p{
  color:var(--c-silver-dim);
  margin-block-end:16px;
}

.ticks{
  display:grid;
  gap:14px;
  margin-block:26px 32px;
}
.ticks li{
  position:relative;
  padding-inline-start:34px;
  font-size:15px;
  color:var(--c-silver);
  line-height:1.8;
}
.ticks li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:6px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--c-gold-soft);
  border:1px solid rgba(184,155,114,.4);
}
.ticks li::after{
  content:"";
  position:absolute;
  inset-inline-start:6px;
  inset-block-start:11px;
  width:6px;height:3px;
  border-inline-start:1.5px solid var(--c-gold-2);
  border-block-end:1.5px solid var(--c-gold-2);
  transform:rotate(-45deg);
}

/* ---------- 16. Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
}

.contact-cards{
  display:grid;
  gap:16px;
}
.contact-card{
  display:flex;
  gap:18px;
  padding:26px;
  background:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  transition:border-color .5s var(--ease), transform .5s var(--ease),
             background .5s var(--ease);
}
.contact-card:hover{
  transform:translateY(-4px);
  border-color:rgba(184,155,114,.4);
  background:var(--c-ink-2);
}
.contact-card__icon{
  flex:0 0 46px;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--c-gold-soft);
  border:1px solid rgba(184,155,114,.26);
  color:var(--c-gold-2);
}
.contact-card__icon svg{ width:22px;height:22px; }
.contact-card__label{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-gold);
  margin-block-end:6px;
}
.contact-card__value{
  font-size:15.5px;
  color:var(--c-white);
  line-height:1.75;
}
.contact-card__value a:hover{ color:var(--c-gold-2); }

/* Form */
.form{
  padding:clamp(26px, 3.4vw, 44px);
  background:linear-gradient(160deg, var(--c-ink), var(--c-black-2));
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{
  position:relative;
  margin-block-end:18px;
}
.field label{
  display:block;
  font-size:13px;
  color:var(--c-silver-dim);
  margin-block-end:8px;
  letter-spacing:.02em;
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--c-line-2);
  border-radius:8px;
  color:var(--c-white);
  font-size:15px;
  transition:border-color .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(200,200,200,.32); }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--c-gold);
  background:rgba(184,155,114,.05);
  box-shadow:0 0 0 3px rgba(184,155,114,.12);
}
.form .btn{ width:100%; margin-block-start:8px; }
.form__note{
  margin-block-start:16px;
  font-size:12.5px;
  color:var(--c-silver-dim);
  text-align:center;
}

/* ---------- 17. Sustainability cycle ---------- */
.cycle{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding-block-start:10px;
}
.cycle::before{
  content:"";
  position:absolute;
  inset-block-start:46px;
  inset-inline:9%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(184,155,114,.5), transparent);
  opacity:.6;
}
.cycle-step{
  position:relative;
  text-align:center;
  padding:0 10px;
}
.cycle-step__dot{
  width:74px;height:74px;
  margin-inline:auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--c-ink);
  border:1px solid var(--c-line-2);
  color:var(--c-gold-2);
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  position:relative;
  z-index:1;
  transition:transform .5s var(--ease), border-color .5s var(--ease),
             box-shadow .5s var(--ease), color .5s;
}
.cycle-step:hover .cycle-step__dot{
  transform:translateY(-4px);
  border-color:var(--c-gold);
  color:var(--c-black);
  background:linear-gradient(120deg, var(--c-gold), var(--c-gold-2));
  box-shadow:0 16px 30px -14px rgba(184,155,114,.6);
}
.cycle-step__title{
  font-family:var(--font-display);
  font-size:16.5px;
  color:var(--c-white);
  margin-block:18px 8px;
}
.cycle-step__text{
  font-size:13.5px;
  color:var(--c-silver-dim);
  line-height:1.85;
}

/* ---------- 18. CTA Band ---------- */
.cta-band{
  position:relative;
  overflow:hidden;
  padding-block:clamp(60px, 8vw, 110px);
  text-align:center;
  border-block:1px solid var(--c-line);
  background:
    radial-gradient(70% 130% at 50% 120%, rgba(184,155,114,.18), transparent 60%),
    var(--c-black-2);
}
.cta-band__title{
  font-size:clamp(26px, 3.6vw, 46px);
  max-width:760px;
  margin-inline:auto;
  margin-block-end:18px;
}
.cta-band__text{
  max-width:560px;
  margin-inline:auto;
  color:var(--c-silver-dim);
  margin-block-end:34px;
}

/* ---------- 19. Footer ---------- */
.footer{
  padding-block:72px 0;
  background:var(--c-black-2);
  border-block-start:1px solid var(--c-line);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(26px, 4vw, 60px);
  padding-block-end:56px;
}
.footer__brand img{
  width: 110px;
  margin-block-end: 20px;
}
.footer__brand p{
  font-size:14px;
  color:var(--c-silver-dim);
  line-height:1.9;
  max-width:300px;
}
.footer__title{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-gold);
  margin-block-end:20px;
}
.footer__links{ display:grid; gap:12px; }
.footer__links a{
  font-size:14.5px;
  color:var(--c-silver-dim);
  transition:color .3s var(--ease), padding-inline-start .3s var(--ease);
  display:inline-block;
}
.footer__links a:hover{
  color:var(--c-white);
  padding-inline-start:6px;
}
.footer__contact{ display:grid; gap:10px; font-size:14.5px; color:var(--c-silver-dim); }
.footer__contact a:hover{ color:var(--c-gold-2); }

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-block:26px;
  border-block-start:1px solid var(--c-line);
  font-size:13px;
  color:var(--c-silver-dim);
}
.footer__socials{ display:flex; gap:10px; }
.footer__socials a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--c-line-2);
  border-radius:50%;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.footer__socials a:hover{
  background:var(--c-gold);
  color:var(--c-black);
  border-color:var(--c-gold);
  transform:translateY(-3px);
}
.footer__socials svg{ width:16px;height:16px; }

/* ---------- 20. Scroll Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--delay, 0s);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.reveal--fade{ transform:none; }
.reveal--scale{ transform:scale(.94); }
.reveal--right{ transform:translateX(-40px); }  /* RTL: comes from start */
.reveal--left{ transform:translateX(40px); }

/* ---------- 21. Utilities ---------- */
.text-gold{ color:var(--c-gold); }
.text-muted{ color:var(--c-silver-dim); }
.text-center{ text-align:center; }
.mt-0{ margin-block-start:0; }
.mb-0{ margin-block-end:0; }
.mt-4{ margin-block-start:32px; }
.mt-6{ margin-block-start:48px; }
.mb-4{ margin-block-end:32px; }
.w-100{ width:100%; }
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Divider glow */
.divider{
  height:1px;
  border:0;
  background:linear-gradient(90deg, transparent, var(--c-line-2), transparent);
  margin-block:clamp(40px, 6vw, 72px);
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1180px){
  .footer__grid{ grid-template-columns:1.2fr 1fr 1fr; }
  .footer__contact{ grid-column:1 / -1; }
}

@media (max-width:1024px){
  :root{ --gutter:22px; --nav-h:78px; }
  body{ font-size:16px; }
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .artists{ grid-template-columns:repeat(2, 1fr); }
  .cycle{ grid-template-columns:repeat(2, 1fr); row-gap:44px; }
  .cycle::before{ display:none; }
}

@media (max-width:900px){
  .nav__menu{
    position:fixed;
    inset:0;
    z-index:880;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:rgba(10,10,10,.97);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    opacity:0;
    visibility:hidden;
    transform:scale(1.02);
    transition:opacity .5s var(--ease), visibility .5s, transform .5s var(--ease);
  }
  .nav__menu .nav__link{
    font-size:24px;
    padding:14px 24px;
    opacity:0;
    transform:translateY(18px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  }
  .nav.is-open .nav__menu{ opacity:1; visibility:visible; transform:none; }
  .nav.is-open .nav__link{ opacity:1; transform:none; }
  .nav.is-open .nav__link:nth-child(1){ transition-delay:.10s; }
  .nav.is-open .nav__link:nth-child(2){ transition-delay:.16s; }
  .nav.is-open .nav__link:nth-child(3){ transition-delay:.22s; }
  .nav.is-open .nav__link:nth-child(4){ transition-delay:.28s; }
  .nav.is-open .nav__link:nth-child(5){ transition-delay:.34s; }
  .nav.is-open .nav__link:nth-child(6){ transition-delay:.40s; }
  .nav.is-open .nav__link:nth-child(7){ transition-delay:.46s; }

  .nav__cta{ display:none; }
  .nav__burger{ display:block; z-index:890; }

  .split{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  :root{ --gutter:18px; }
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
  .artists{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .hero{ min-height:92svh; }
  .hero__scroll{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__brand p{ max-width:none; }
  .footer__bottom{ flex-direction:column; text-align:center; }
  .cycle{ grid-template-columns:1fr; }
  .cycle-step__dot{ width:64px;height:64px; font-size:19px; }
}

@media (max-width:520px){
  body{ font-size:15.5px; }
  .artists{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .form__row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat__num{ font-size:28px; }
  .marquee__track{ gap:40px; }
  .nav__logo img{ width:78px; }
  .footer__grid{ grid-template-columns:1fr; }
}

/* ---------- 23. Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__line > span{ transform:none; }
  .page{ opacity:1; transform:none; }
}

/* ---------- 24. Print ---------- */
@media print{
  .nav, .loader, .hero__scroll, .footer__socials{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page{ opacity:1; transform:none; }
}
.footer__bottom{
  justify-content:center;
  text-align:center;
}