/* ===================================================================
   ARTLINE - one page site
   Brand: #29264C  #3A3289  #67CDD4  #EE264E  #FFFFFF
   Display headings: Tel Aviv Brutalist · Body: Google Sans
   =================================================================== */

@font-face{
  font-family:"TelAviv Brutalist";
  src:url("../fonts/TelAviv-BrutalistBold.ttf") format("truetype");
  font-weight:700 900;
  font-display:swap;
}
@font-face{
  font-family:"TelAviv Brutalist";
  src:url("../fonts/TelAviv-BrutalistRegular.ttf") format("truetype");
  font-weight:400 600;
  font-display:swap;
}
@font-face{
  font-family:"TelAviv Brutalist Light";
  src:url("../fonts/TelAviv-BrutalistLight.ttf") format("truetype");
  font-weight:300;
  font-display:swap;
}

:root{
  --navy:#29264C;
  --indigo:#3A3289;
  --teal:#67CDD4;
  --pink:#EE264E;
  --white:#FFFFFF;

  /* dark theme: dark backgrounds, light content */
  --ink:#f1eff9;
  --muted:#b4b0d2;
  --bg:#252048;              /* base navy (matches the section background art) */
  --bg-soft:#1e1a3f;         /* deeper navy for alternating sections */
  --line:rgba(255,255,255,.13);
  --card:rgba(255,255,255,.055);
  --card-hover:rgba(255,255,255,.09);
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 6px 24px rgba(0,0,0,.28);
  --shadow-md:0 22px 60px rgba(0,0,0,.42);
  --container:1180px;
  --header-h:90px;

  --font:"Google Sans","Assistant","Segoe UI",Tahoma,Arial,sans-serif;
  --font-display:"TelAviv Brutalist","Google Sans","Assistant","Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:max(17px,1.18vw);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* clip (not hidden) so position:sticky keeps working */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{width:100%;max-width:none;margin-inline:auto;padding-inline:9vw}
.site-header .container{padding-inline:60px}

.skip-link{
  position:absolute;right:-9999px;top:0;z-index:200;background:var(--pink);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 10px;font-weight:700;
}
.skip-link:focus{right:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:clamp(13px,.9vw,1.35rem);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 10px 26px rgba(238,38,78,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(238,38,78,.42)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-lg{padding:17px 40px}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--header-h);display:flex;align-items:center;
  background:transparent;transition:background .3s ease,box-shadow .3s ease,height .3s ease;
}
.site-header.scrolled{
  background:rgba(41,38,76,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
}
.header-inner{position:relative;display:flex;align-items:center;gap:20px;width:100%}
.brand{margin-inline-end:auto}          /* logo right, everything else pushed left */
.brand-logo{height:41px;width:auto}     /* +10% */
.main-nav{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:26px;
}
.main-nav a{color:#fff;font-weight:600;font-size:max(12px,.8vw);opacity:.92;transition:opacity .2s}
.main-nav a:hover{opacity:1}
.main-nav .nav-cta{display:none}        /* desktop: CTA lives in .header-actions */
.header-actions{display:flex;align-items:center;gap:14px}
.header-actions .nav-cta{
  background:var(--pink);color:#fff;font-weight:700;padding:9px 20px;border-radius:999px;
  box-shadow:0 8px 20px rgba(238,38,78,.35);font-size:max(12px,.8vw);
}
.header-phone{
  display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;
  border:1.5px solid rgba(255,255,255,.4);padding:8px 16px;border-radius:999px;font-size:max(12px,.8vw);
}
.header-phone svg{width:17px;height:17px;fill:var(--teal)}
.header-phone:hover{background:rgba(255,255,255,.1)}

.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  color:#fff;overflow:hidden;padding-block:calc(var(--header-h) + 40px) 90px;
  background:var(--navy);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(41,38,76,.35),rgba(41,38,76,.78) 78%,rgba(41,38,76,.95)),
    url("../img/hero-bg.png") center/cover no-repeat;
}
.hero-inner{position:relative;z-index:2;max-width:760px}
.hero-kicker{
  color:var(--teal);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:max(.9rem,1.00vw);margin-bottom:14px;
  text-shadow:0 2px 12px rgba(41,38,76,.9);
}
.hero-title{
  font-family:var(--font-display);font-weight:900;line-height:.8em;
  font-size:max(2.4rem,6vw);letter-spacing:-.01em;
  text-shadow:0 4px 30px rgba(41,38,76,.55);
}
.hero-title span{color:var(--teal)}
.hero-text{
  margin-top:22px;font-size:max(1.05rem,2.3vw);
  color:rgba(255,255,255,.9);max-width:620px;
}
.hero-text strong{color:#fff}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.hero-note{margin-top:26px;font-size:max(.95rem,1.06vw);color:rgba(255,255,255,.7)}
.hero-scroll{
  position:absolute;inset-block-end:22px;inset-inline-start:50%;transform:translateX(-50%);
  z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);animation:bob 2s ease-in-out infinite;
}
.hero-scroll svg{width:22px;height:22px;fill:#fff}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--indigo);color:#fff;text-align:center;padding:16px 0;font-weight:600}
.trust-strip span{opacity:.92;font-size:max(1.02rem,1.13vw)}

/* ---------- generic section ---------- */
.section{padding-block:clamp(64px,9vw,110px)}
.section-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(38px,6vw,64px)}
.eyebrow{
  color:var(--pink);font-weight:800;letter-spacing:.04em;font-size:max(.98rem,1.09vw);
  margin-bottom:10px;
}
.section-head h2,.about-text h2{
  font-family:var(--font-display);font-weight:800;line-height:1em;
  font-size:max(1.8rem,4vw);color:var(--navy);
}
.section-sub{margin-top:16px;color:var(--muted);font-size:max(1.08rem,1.20vw)}

/* ---------- advantages — split header + scattered stacked cards ---------- */
.advantages{background:#252048;padding-block-end:clamp(140px,19vw,270px)}

/* header: big heading on the right, eyebrow + lead hugging its left edge */
.adv-head{
  display:grid;grid-template-columns:60% 27%;
  gap:0 2%;justify-content:start;align-items:start;
}
.adv-title{
  font-family:var(--font-display);font-weight:900;color:#fff;text-align:start;
  width:100%;
  font-size:max(2rem,4.5vw);line-height:1em;letter-spacing:-.015em;
}
.adv-head-text{text-align:start;padding-top:1.4vw;width:100%;margin-right:10%}
.adv-head-text .eyebrow{
  color:var(--pink);font-weight:800;letter-spacing:.02em;
  font-size:max(.78rem,1.2vw);margin-top:-1.1em;margin-bottom:1.6em;
}
.adv-lead{
  color:var(--muted);line-height:1.75;
  font-size:max(.76rem,.8vw);
}

/* three tall cards, centred, gently overlapping and rotated */
.adv-cards{
  display:flex;align-items:stretch;justify-content:center;
  margin-top:clamp(40px,6vw,84px);
}
.adv-card{
  flex:0 0 30%;
  display:flex;flex-direction:column;align-items:stretch;text-align:start;
  min-height:clamp(260px,33vw,440px);
  padding:max(18px,2.08vw) max(20px,3.13vw);   /* 40px / 60px @1920 */
  border:5px solid transparent;
  border-radius:clamp(24px,3.2vw,44px);      /* uniform on all four corners */
}
/* --deal: 1 = fanned out (rest), 0 = collapsed into a stack on the start side (scroll-fx.js deals it) */
.adv-cards .adv-card:nth-child(1){z-index:3;margin-right:-6.2vw;                       /* front, tilt left  */
  transform:translateX(calc((1 - var(--deal,1)) * 4vw))
            rotate(calc(-3.5deg + (1 - var(--deal,1)) * -6deg))
            scale(calc(1 - (1 - var(--deal,1)) * .04))}
.adv-cards .adv-card:nth-child(2){z-index:2;margin-right:.4vw;                          /* middle, tilt right */
  transform:translateX(calc((1 - var(--deal,1)) * 20vw)) translateY(-4%)
            rotate(calc(3.5deg + (1 - var(--deal,1)) * -7deg))
            scale(calc(1 - (1 - var(--deal,1)) * .06))}
.adv-cards .adv-card:nth-child(3){z-index:1;margin-right:-.4vw;                         /* back, tilt left  */
  transform:translateX(calc((1 - var(--deal,1)) * 38vw)) translateY(3%)
            rotate(calc(-3.5deg + (1 - var(--deal,1)) * -4deg))
            scale(calc(1 - (1 - var(--deal,1)) * .08))}

.adv-card:nth-child(1){background:var(--teal);border-color:var(--teal);color:var(--navy)}
.adv-card:nth-child(2){background:var(--bg);border-color:#fff;color:#fff}
.adv-card:nth-child(3){background:#fff;border-color:#fff;color:var(--navy)}

.adv-num{
  font-family:var(--font-display);font-weight:900;line-height:1;color:inherit;
  font-size:max(1.5rem,3vw);margin-top:0;text-align:start;
}
.adv-card-body{margin-top:auto;text-align:start}
.adv-card-body h3{
  font-family:var(--font);font-weight:800;color:inherit;
  font-size:max(.95rem,1.4vw);margin-bottom:.65em;
}
.adv-card-body p{font-size:max(.68rem,.8vw);line-height:1.55}
.adv-card:nth-child(1) .adv-card-body p{color:rgba(41,38,76,.72);width:65%}
.adv-card:nth-child(2) .adv-card-body p{color:rgba(255,255,255,.72);width:67.7%}
.adv-card:nth-child(3) .adv-card-body p{color:#5c5a78;width:70%}

/* closing bullets */
.adv-bullets{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1.4vh 5%;margin-top:max(40px,5.2vw);margin-bottom:max(40px,5.2vw);
  color:#e9e7f7;font-weight:600;font-size:max(.8rem,.8vw);
}
.adv-bullets li{position:relative;padding-inline-start:calc(8px + 1.4vw)}
.adv-bullets li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;
  transform:translateY(-50%);
  width:clamp(5px,.6vw,8px);aspect-ratio:1;border-radius:50%;background:var(--pink);
}

/* ---------- catalog / filters ---------- */
.filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-bottom:40px;
}
.filter{
  padding:9px 20px;border-radius:999px;font-weight:700;font-size:max(12px,.8vw);
  background:#fff;border:1.5px solid var(--line);color:var(--muted);
  transition:.18s ease;
}
.filter:hover{border-color:var(--teal);color:var(--navy)}
.filter.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

.workshop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px;
}
.workshop-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid #ececf4;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 44px rgba(41,38,76,.12);transition:transform .2s ease,box-shadow .2s ease;
}
.workshop-card:hover{transform:translateY(-5px);box-shadow:0 22px 60px rgba(41,38,76,.2)}
.workshop-card.is-hidden{display:none}

.card-media{position:relative}
.flag-badge{
  position:absolute;z-index:3;inset-block-start:12px;inset-inline-end:12px;
  background:var(--pink);color:#fff;font-weight:800;font-size:max(.8rem,0.89vw);
  padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(238,38,78,.4);
}

/* gallery */
.gallery{position:relative;aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.gallery-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease;
}
.gallery-img.is-active{opacity:1}
.gallery-nav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);
  color:var(--pink);font-size:max(1.2rem,1.33vw);line-height:1;display:grid;place-items:center;
  opacity:.55;transition:opacity .2s ease,background .2s ease;z-index:2;
  box-shadow:0 4px 12px rgba(41,38,76,.18);
}
.gallery-nav:hover{background:var(--pink);color:#fff;opacity:1}
.gallery-nav.prev{inset-inline-end:8px}
.gallery-nav.next{inset-inline-start:8px}
.gallery:hover .gallery-nav,.gallery-nav:focus-visible{opacity:1}
.gallery-dots{
  position:absolute;inset-block-end:10px;inset-inline:0;display:flex;justify-content:center;gap:6px;z-index:2;
}
.gallery-dots button{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:.2s;
}
.gallery-dots button.is-active{background:#fff;width:20px;border-radius:4px}
.gallery[data-single] .gallery-nav,.gallery[data-single] .gallery-dots{display:none}

.card-body{padding:24px 24px 24px;display:flex;flex-direction:column;flex:1}
.card-cat{
  color:var(--indigo);font-weight:800;font-size:max(.78rem,0.87vw);letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:8px;
}
.card-body h3{
  font-family:var(--font);font-weight:800;font-size:max(1.18rem,1.31vw);line-height:1.3;color:var(--navy);
  margin-bottom:9px;
}
.card-body p{color:var(--muted);font-size:max(11px,.8vw);line-height:1.55;flex:1}
.card-stats{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 16px;margin:18px 0 16px;
  padding-block-start:16px;border-top:1px solid #ececf4;
}
.card-stats li{
  display:inline-flex;align-items:center;gap:7px;font-size:max(11px,.8vw);font-weight:600;color:var(--navy);
}
.card-stats .stat-ico{width:26px;height:26px;flex-shrink:0}
.card-stats svg{width:16px;height:16px;fill:var(--teal);flex-shrink:0}
.card-link{
  display:block;text-align:center;background:var(--pink);color:#fff;
  font-weight:700;font-size:clamp(13px,.9vw,1.35rem);padding:13px 16px;border-radius:11px;
  box-shadow:0 10px 24px rgba(238,38,78,.28);transition:transform .15s ease,box-shadow .2s ease;
}
.card-link:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(238,38,78,.38)}

.catalog-note{text-align:center;margin-top:44px;color:var(--muted)}
.catalog-note a{color:var(--pink);font-weight:700}

/* ---------- clients — logos orbiting a centred title ---------- */
.clients{background:#252048;text-align:center}
.clients .container{padding-block:clamp(32px,5vw,80px)}

.clients-grid{
  position:relative;
  direction:ltr;                 /* lay logos left-to-right, matching the reference */
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(clamp(76px,8.5vw,124px),auto);
  gap:1.6vw 3%;
  align-items:center;justify-items:center;
  max-width:96%;margin-inline:auto;
}
.clients-center{direction:rtl}

/* central title block spans the two middle columns, rows 2-4 */
.clients-center{
  grid-column:3 / 5;grid-row:2 / 5;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:relative;z-index:3;padding-inline:2%;
}
.clients-center h2{
  font-family:var(--font-display);font-weight:900;color:#fff;line-height:1em;
  font-size:max(2rem,4.5vw);letter-spacing:-.01em;
}
.clients-center p{
  margin-top:clamp(10px,1.4vw,20px);color:var(--muted);line-height:1.5;
  font-size:max(.82rem,1.1vw);
}

/* radial glow behind the title — blue core, transparent edges */
.clients-glow{
  position:absolute;left:50%;top:50%;
  width:min(52vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, #2f2a5c 0%, transparent 70%);
  filter:blur(4px);pointer-events:none;z-index:0;
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  transition:transform 1s cubic-bezier(.22,.7,.2,1),opacity .8s ease;
}
.clients-grid.is-in .clients-glow{transform:translate(-50%,-50%) scale(1);opacity:1}

.client-logo{
  position:relative;z-index:1;
  max-width:78%;max-height:clamp(38px,4.4vw,64px);width:auto;height:auto;
  object-fit:contain;opacity:.92;
  transition:opacity .2s ease,transform .25s ease;
  will-change:transform;
}
.client-logo:hover{opacity:1;transform:scale(1.06)}

/* ---------- testimonials — seamless edge-to-edge marquee ---------- */
.testimonials{
  position:relative;overflow:hidden;
  background:#252048;
  padding-block:clamp(80px,10vw,130px);
}
.testimonials .eyebrow{color:var(--pink);font-size:max(12px,1.1vw);margin-bottom:1em}
.testimonials .section-sub{color:var(--muted);font-size:max(.9rem,1.1vw)}
/* wide, viewport-centred 2-line heading */
.testimonials .container{padding-inline:0}
.testimonials .section-head{max-width:none}
.testimonials .section-head h2{
  color:#fff;width:85vw;margin-inline:auto;
  font-size:max(1.8rem,4.5vw);
}

.testi-marquee{
  position:relative;width:100%;overflow:hidden;margin-top:44px;padding-block:34px;
  direction:ltr;                                 /* anchor the track's left edge at x:0 (parent is RTL) */
}
.testi-track{
  display:flex;width:max-content;
  align-items:flex-start;
  animation:testi-scroll 60s linear infinite;    /* continuous, never pauses */
}
@keyframes testi-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}            /* track holds 2 identical copies -> seamless */
}
.testi-card{
  flex:0 0 auto;width:min(360px,82vw);
  margin-inline-end:28px;                        /* trailing gap included -> exact 50% loop */
  direction:rtl;
  background:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  padding:38px 30px 40px;
  position:relative;
  text-align:center;
}
/* staggered: odd cards sit high, even cards drop lower */
.testi-card:nth-child(even){margin-top:52px}
/* brand quote marks (SVG) — top-right + bottom-left, breaking the card edge */
.testi-card::before,.testi-card::after{
  content:"";position:absolute;width:44px;height:40px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  pointer-events:none;
}
.testi-card::before{top:-16px;right:24px;background-image:url("../img/quote-right.svg")}
.testi-card::after{bottom:-16px;left:24px;background-image:url("../img/quote-left.svg")}
.testi-card blockquote{font-size:max(12px,.8vw);line-height:1.6;color:var(--navy)}
.testi-card figcaption{margin-top:16px;font-weight:700;color:var(--navy);font-size:max(.88rem,0.98vw)}

/* ---------- about — centred intro + rotating photo fan ---------- */
.about{position:relative;overflow:hidden;padding-block-end:0}

.about-head{text-align:center}
.about-head .eyebrow{
  color:var(--pink);font-weight:800;letter-spacing:.02em;
  font-size:max(12px,1.1vw);margin-bottom:1.6em;
}
.about-head h2{
  font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:max(1.9rem,4.5vw);line-height:1em;letter-spacing:-.015em;
}

/* button on the left, paragraph on the right */
.about-lead{
  display:flex;align-items:flex-start;justify-content:center;
  gap:0 3.7vw;margin-top:2.6vw;
}
.about-lead p{
  flex:0 1 34vw;order:1;                 /* RTL: first = right side */
  color:var(--muted);line-height:1.85;text-align:start;
  font-size:max(12px,.8vw);
}
.about-lead .btn{
  order:2;flex:0 0 auto;align-self:center;
  padding:1.1em 2.4em;
}

/* ---- photo fan (all live-tunable via CSS vars — see about-tuner.js) ---- */
.about-fan{
  position:relative;width:100%;
  margin-top:3.4vw;
  height:var(--fan-h,30vw);min-height:260px;   /* taller -> more of each photo shows */
}
.fan-stage{position:absolute;inset:0;z-index:2}

/* soft pink brand light — just peeks out behind the centre photo */
.about-glow{
  position:absolute;z-index:var(--glow-z,0);pointer-events:none;border-radius:50%;
  left:var(--glow-x,50%);top:var(--glow-y,11%);transform:translate(-50%,var(--glow-ty,-12%));
  width:var(--glow-w,74.5vw);height:var(--glow-h,57vw);
  background:radial-gradient(ellipse at center,
    rgba(238,38,78,var(--glow-o1,.78)) 0%,
    rgba(238,38,78,var(--glow-o2,.34)) var(--glow-s2,40%),
    rgba(238,38,78,var(--glow-o3,.2)) var(--glow-s3,62%),
    transparent var(--glow-s4,74%));
  filter:blur(var(--glow-blur,28px));
}

/* floating white dots — over the photos only, never over the text */
.about-dots{
  position:absolute;left:0;right:0;
  top:var(--dots-top,-5.5vw);height:var(--dots-h,14.5vw);
  z-index:var(--dots-z,4);pointer-events:none;
}
.about-dots i{
  position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,var(--dot-glow,.35));
  opacity:var(--o,.8);
  animation:about-dot var(--d,7s) ease-in-out infinite alternate;
  animation-delay:var(--dl,0s);
}
@keyframes about-dot{
  from{transform:translateY(0);                     opacity:calc(var(--o,.8) * var(--dot-dim,.5))}
  to  {transform:translateY(var(--dot-float,-29px));opacity:var(--o,.8)}
}

.fan-item{
  position:absolute;left:50%;top:0;
  width:var(--img-w,26vw);margin-left:calc(var(--img-w,26vw) / -2);
  aspect-ratio:var(--img-ar,5 / 6);
  border:var(--img-bd,5px) solid #fff;
  border-radius:var(--img-r-top,3.2vw) var(--img-r-top,3.2vw) var(--img-r-bot,0vw) var(--img-r-bot,0vw);
  overflow:hidden;background:#181530;
  box-shadow:0 24px 60px rgba(11,8,26,.45);
  transition:transform var(--fan-speed,1s) cubic-bezier(.32,.72,.2,1), opacity .8s ease, filter .8s ease;
  will-change:transform;
}
.fan-item img{width:100%;height:100%;object-fit:cover;display:block}

/* fan slots — all the SAME size, sides just drop, rotate and tuck behind ---- */
/* --open: 1 = spread (rest), 0 = all stacked at centre behind the lead image (scroll-fx.js spreads it) */
.fan-item[data-slot="0"] {z-index:5;transform:translate(0,0) rotate(0deg)}
.fan-item[data-slot="-1"]{z-index:4;filter:brightness(var(--br1,1));
  transform:translate(calc(var(--spread1,17vw) * -1 * var(--open,1)),calc(var(--drop1,10.5%) * var(--open,1))) rotate(calc(var(--rot1,6deg) * -1 * var(--open,1)))}
.fan-item[data-slot="1"] {z-index:4;filter:brightness(var(--br1,1));
  transform:translate(calc(var(--spread1,17vw) * var(--open,1)),calc(var(--drop1,10.5%) * var(--open,1))) rotate(calc(var(--rot1,6deg) * var(--open,1)))}
.fan-item[data-slot="-2"]{z-index:3;filter:brightness(var(--br2,1));
  transform:translate(calc(var(--spread2,31.5vw) * -1 * var(--open,1)),calc(var(--drop2,27%) * var(--open,1))) rotate(calc(var(--rot2,8.5deg) * -1 * var(--open,1)))}
.fan-item[data-slot="2"] {z-index:3;filter:brightness(var(--br2,1));
  transform:translate(calc(var(--spread2,31.5vw) * var(--open,1)),calc(var(--drop2,27%) * var(--open,1))) rotate(calc(var(--rot2,8.5deg) * var(--open,1)))}

/* ---------- contact ---------- */
.contact{background:var(--bg-soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.steps{list-style:none;display:flex;flex-direction:column;gap:22px}
.steps li{display:flex;gap:18px;align-items:flex-start}
.step-num{
  font-family:var(--font-display);font-weight:900;font-size:max(1.5rem,1.67vw);color:#fff;
  background:linear-gradient(135deg,var(--indigo),var(--pink));
  min-width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;
}
.steps h3{font-family:var(--font);font-weight:700;font-size:max(1.2rem,1.33vw);color:var(--navy)}
.steps p{color:var(--muted);font-size:max(1rem,1.11vw)}

.lead-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);
}
.lead-form h3{font-family:var(--font);font-weight:700;font-size:max(1.35rem,1.50vw);color:var(--navy);margin-bottom:18px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:max(.92rem,1.02vw);color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:max(1rem,1.11vw);color:var(--ink);background:#fff;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.field textarea{resize:vertical}
.form-alt{margin-top:14px;text-align:center;font-size:max(.95rem,1.06vw);color:var(--muted)}
.form-alt a{color:var(--pink);font-weight:700}
.form-status{margin-top:12px;font-weight:700;color:var(--indigo);text-align:center;min-height:1.2em}

.contact-direct{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;
  margin-top:44px;padding-block-start:28px;border-top:1px solid var(--line);
}
.contact-direct a{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--navy)}
.contact-direct svg{width:20px;height:20px;fill:var(--pink)}
.contact-name{color:var(--muted);font-weight:600}

/* ---------- final CTA + footer — one dark rounded card ---------- */
.final-cta{
  background:#252048;
  padding:0 3.6vw 3vw;
  position:relative;z-index:3;
}
.fc-card{
  background:#1c1838;color:#fff;
  border-radius:clamp(24px,3.4vw,64px);
  margin-top:-3vw;                       /* tuck under the photo fan */
  padding:6.25vw 4vw 4.17vw;             /* 120px / 80px @1920 */
}

.fc-top{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:2vw 5%;align-items:start;
}
.fc-title{
  font-family:var(--font-display);font-weight:900;color:#fff;text-align:start;
  font-size:max(1.9rem,4.5vw);line-height:1em;letter-spacing:-.015em;
}

.fc-lead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.6vw 2.2vw}
.fc-lead .btn{order:2}                   /* RTL: sits on the left */
.fc-para{
  order:1;flex:1 1 55%;min-width:14rem;
  color:rgba(255,255,255,.72);line-height:1.85;
  font-size:max(11px,.85vw);
}
.fc-contact{
  order:3;flex:1 1 100%;margin-top:1.4vw;
  display:flex;flex-wrap:wrap;align-items:center;gap:.6vw 1.4vw;
  color:rgba(255,255,255,.8);font-size:max(11px,.85vw);font-weight:600;
}
.fc-contact a{color:#fff}
.fc-contact .fc-pref{color:var(--pink);font-weight:800}
.fc-contact > *:not(:last-child)::after{
  content:"";display:inline-block;vertical-align:middle;
  width:.34vw;height:.34vw;min-width:3px;min-height:3px;border-radius:50%;
  background:rgba(255,255,255,.4);margin-inline-start:1.4vw;
}

.fc-rule{border:0;border-top:1px solid rgba(255,255,255,.14);margin-block:2.6vw}

.fc-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5vw 3vw;
}
.fc-logo{order:1;width:12.9vw;height:5vw;display:flex;align-items:center}   /* RTL: right */
.fc-logo img{width:12vw;height:3.4vw;object-fit:contain;display:block}
.fc-nav{order:2;display:flex;flex-wrap:wrap;gap:.8vw 1.8vw}
.fc-nav a{color:rgba(255,255,255,.78);font-weight:600;font-size:max(11px,.85vw)}
.fc-nav a:hover{color:#fff}

/* ---------- designer credit (below the card) ---------- */
.site-footer{background:#252048;padding-block:1.4vw 2.2vw}
.site-credit{
  display:flex;align-items:center;justify-content:center;gap:.7vw;
  color:rgba(255,255,255,.55);font-size:max(11px,.85vw);
}
@font-face{
  font-family:"ShifraLogo";
  src:url("../fonts/FtShifraLogo-Logo.woff2") format("woff2");
  font-display:swap;
}
.shifra-logo-wrap{
  --shifra-size:1.7vw;
  --shifra-color:#FAF9F7;
  direction:ltr!important;unicode-bidi:isolate;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
}
.shifra-logo-stage{
  direction:ltr!important;unicode-bidi:isolate;
  display:flex;align-items:center;justify-content:center;
}
.shifra-wordmark{
  direction:ltr!important;unicode-bidi:isolate;
  display:flex;flex-direction:row!important;align-items:flex-end;
  font-family:"ShifraLogo",serif!important;font-weight:400!important;font-style:normal!important;
  font-size:var(--shifra-size);line-height:.6;color:var(--shifra-color);
  user-select:none;margin-top:-0.65em;
}
.shifra-mask{
  display:inline-flex;align-items:flex-end;overflow:hidden;height:1.5em;
  padding-left:.35em;padding-right:.18em;margin-left:-0.35em;margin-right:-0.18em;
}
.shifra-mask[data-letter="a"]{padding-left:.42em;margin-left:-0.42em}
.shifra-mask[data-letter="f"]{padding-right:.4em;margin-right:-0.4em}
.shifra-letter{display:inline-block;will-change:transform}
.shifra-star-mask{display:inline-flex;align-items:flex-end;height:1.5em}
.shifra-star{display:inline-block;will-change:transform}

/* ---------- privacy policy modal ---------- */
.privacy{
  position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;
  background:rgba(9,7,20,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.privacy.is-open{opacity:1;pointer-events:auto}
.privacy[hidden]{display:none}
.privacy-panel{
  position:relative;width:min(760px,96vw);max-height:88vh;display:flex;flex-direction:column;
  background:#1c1838;color:#e9e7f7;border:1px solid rgba(255,255,255,.12);
  border-radius:18px;box-shadow:0 40px 110px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.98);transition:transform .25s ease;
}
.privacy.is-open .privacy-panel{transform:none}
.privacy-x{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center;font-size:20px;line-height:1;transition:background .15s ease;
}
.privacy-x:hover{background:rgba(255,255,255,.2)}
.privacy-body{
  overflow-y:auto;padding:clamp(26px,4vw,46px);
  font-size:max(13px,.92vw);line-height:1.8;
}
.privacy-body h2{
  font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:max(1.3rem,1.7vw);line-height:1.2;margin-bottom:.35em;
}
.privacy-updated{color:var(--muted);font-size:.85em;margin-bottom:1.6em}
.privacy-body h3{color:#fff;font-weight:800;font-size:max(15px,1.05vw);margin:1.8em 0 .5em}
.privacy-body p{margin-bottom:1em;color:#d7d4ef}
.privacy-body ul{margin:0 0 1em;padding-inline-start:1.3em;color:#d7d4ef}
.privacy-body li{margin-bottom:.4em}
.privacy-body a{color:var(--teal);font-weight:700}
.privacy-consent-box{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:.9em 1.1em;margin:1em 0;color:#fff;
}
.pv-link{color:var(--teal);font-weight:700;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .privacy,.privacy-panel{transition:none}
}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===================================================================
   DARK THEME OVERRIDES — placed last so they win the cascade.
   Section backgrounds: add data-bg="1|2|3" on a <section> to use bg-N.png
   =================================================================== */
/* every content section shares the same navy base, so section seams line up */
.advantages,.about,.clients,.testimonials,.final-cta{background:#252048}
/* the wave/blob artwork sits at the top of the section; flat navy below it */
[data-bg="1"]{background:#252048 url("../img/bg-1.png") top center/100% auto no-repeat}
[data-bg="2"]{background:#252048 url("../img/bg-2.png") top center/100% auto no-repeat}
[data-bg="3"]{background:#252048 url("../img/bg-3.png") top center/100% auto no-repeat}

.section-head h2,.about-text h2{color:#fff}
.section-sub{color:var(--muted)}

.filter{background:var(--card);border-color:var(--line);color:var(--muted)}
.filter:hover{border-color:var(--teal);color:#fff}
.filter.is-active{background:var(--pink);border-color:var(--pink);color:#fff}

.workshop-card{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.workshop-card:hover{box-shadow:var(--shadow-md)}
.gallery{background:#181530}
.card-cat{color:var(--teal)}
.card-body h3{color:#fff}
.card-body p{color:var(--muted)}
.card-stats{border-color:var(--line)}
.card-stats li{color:#eceafb}
.catalog-note{color:var(--muted)}

.about-lead p{color:var(--muted)}

.lead-form{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.lead-form h3{color:#fff}
.field label{color:#eceafb}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
.field select option{background:#221d44;color:var(--ink)}
.form-alt{color:var(--muted)}
.form-status{color:var(--teal)}
.steps h3{color:#fff}
.steps p{color:var(--muted)}
.contact-direct{border-color:var(--line)}
.contact-direct a{color:#fff}
.contact-name{color:var(--muted)}

/* ===================================================================
   CATALOG — light section with a blue arch transition from the dark
   section above it (matches the reference screenshot)
   =================================================================== */
.catalog{
  background:#fff;
  position:relative;z-index:1;
  /* tall, rounded blue arch top AND bottom (bottom = same cut, flipped) */
  --arch:clamp(120px,16vw,220px);
  border-radius:50% 50% 50% 50% / var(--arch) var(--arch) var(--arch) var(--arch);
  margin-block:calc(var(--arch) * -0.9) calc(var(--arch) * -0.9);
  padding-block:calc(var(--arch) + 40px);
}
.clients{padding-block-start:calc(clamp(120px,16vw,220px) + 40px)}
/* wide, centred 2-line heading */
.catalog .section-head{max-width:none}
.catalog .section-head h2{color:var(--navy);width:100%;font-size:max(1.7rem,3.5vw)}
.catalog .section-sub{color:#5c5a78;font-size:max(.9rem,.8vw)}
.catalog .eyebrow{color:var(--pink);font-size:max(12px,1.1vw)}
.catalog .card-body h3{font-family:var(--font-display)}
.catalog .card-link{border-radius:100px}
.catalog .container{margin-top:clamp(-120px,-6.25vw,-40px);padding-inline:15vw}   /* -120px @1920 */

.catalog .filter{background:#fff;border-color:#e3e1ee;color:#6b6889}
.catalog .filter:hover{border-color:var(--pink);color:var(--navy)}
.catalog .filter.is-active{background:var(--pink);border-color:var(--pink);color:#fff}

.catalog .workshop-card{background:#fff;border-color:#ececf4;box-shadow:0 14px 44px rgba(41,38,76,.12)}
.catalog .workshop-card:hover{box-shadow:0 24px 64px rgba(41,38,76,.2)}
.catalog .gallery{background:#f2f0f8}
.catalog .card-cat{color:var(--indigo)}
.catalog .card-body h3{color:var(--navy)}
.catalog .card-body p{color:#5c5a78}
.catalog .card-stats{border-color:#ececf4}
.catalog .card-stats li{color:var(--navy)}
.catalog .catalog-note{color:#5c5a78}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .workshop-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .adv-head{grid-template-columns:1fr;gap:6vw}
  .adv-title{font-size:max(2rem,7vw);width:auto}
  .adv-head-text{width:auto;margin-right:0}
  .adv-head-text .eyebrow{margin-top:0}
  .adv-lead{max-width:46ch}
  .adv-cards .adv-card{flex-basis:36%}
  .workshop-grid{grid-template-columns:repeat(2,1fr);gap:44px 22px}
  .about-lead{flex-direction:column;align-items:center;gap:5vw}
  .about-lead p{flex:0 1 auto;max-width:56ch;text-align:center;font-size:max(13px,1.7vw)}
  .about-lead .btn{order:3}
  .about-fan{height:52vw}
  .about-dots{height:34vw}
  .about-glow{width:64vw;height:32vw}
  .fan-item{width:38vw;margin-left:-19vw}
  .fan-item[data-slot="-1"]{transform:translate(-15vw,5%)  rotate(-6deg)}
  .fan-item[data-slot="1"] {transform:translate( 15vw,5%)  rotate( 6deg)}
  .fan-item[data-slot="-2"]{transform:translate(-29vw,12%) rotate(-12deg)}
  .fan-item[data-slot="2"] {transform:translate( 29vw,12%) rotate( 12deg)}
  .contact-grid{grid-template-columns:1fr;gap:36px}

  .clients-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:8vw 5%}
  .clients-center{grid-column:1 / -1;grid-row:auto;order:-1;margin-bottom:2vw}
  .clients-center h2{font-size:max(2.2rem,9vw)}
  .clients-center br{display:none}
  .clients-glow{display:none}
  .client-logo{max-height:clamp(40px,8vw,66px)}
}

@media (max-width:720px){
  body{font-size:max(16px,1.11vw)}
  .main-nav{
    position:fixed;inset-block-start:var(--header-h);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(41,38,76,.98);backdrop-filter:blur(8px);
    padding:10px 22px 24px;transform:translateY(-130%);transition:transform .3s ease;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
  }
  .main-nav.open{transform:translateY(0)}
  .main-nav a{padding:14px 4px;border-block-end:1px solid rgba(255,255,255,.1);font-size:max(1.05rem,1.17vw)}
  .main-nav .nav-cta{
    display:block;text-align:center;margin-top:14px;border-block-end:0;
    background:var(--pink);border-radius:999px;
  }
  .nav-toggle{display:flex;margin-inline-start:auto}
  .header-actions{display:none}
  .site-header .container{padding-inline:22px}
  .site-header{background:rgba(41,38,76,.96);backdrop-filter:blur(8px)}

  .adv-cards{flex-direction:column;align-items:stretch;gap:4vw;padding:0}
  .adv-cards .adv-card{flex-basis:auto;padding:7vw 6vw 9vw;border-radius:5vw}
  .adv-cards .adv-card:nth-child(n){transform:none;margin-inline-start:0;margin-right:0}
  .adv-card-body p,
  .adv-card:nth-child(1) .adv-card-body p,
  .adv-card:nth-child(2) .adv-card-body p,
  .adv-card:nth-child(3) .adv-card-body p{font-size:3.4vw;width:auto}
  .adv-card-body h3{font-size:4.6vw}
  .adv-num{font-size:11vw}
  .catalog .container{padding-inline:6vw}
  .workshop-grid{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .testi-card:nth-child(even){margin-top:32px}

  /* about gallery: drop it lower, tuck its bottom under the dark CTA, smaller dots */
  .about-fan{margin-top:calc(3.4vw + 50px)}
  .about-dots i{scale:.55}
  .final-cta{padding-inline:4vw;margin-top:-26vw;position:relative;z-index:6}
  .fc-card{padding:8vw 6vw 7vw;border-radius:6vw;margin-top:0}
  .fc-top{grid-template-columns:1fr;gap:6vw}
  .fc-title{font-size:10vw}
  .fc-para{flex-basis:100%;font-size:3.4vw}
  .fc-contact{font-size:3.2vw;margin-top:5vw}
  .fc-contact > *:not(:last-child)::after{margin-inline-start:3vw}
  .fc-rule{margin-block:7vw}
  .fc-bottom{flex-direction:column;align-items:flex-start;gap:5vw}
  .fc-logo{width:auto;height:auto}
  .fc-logo img{width:auto;height:11vw}
  .fc-nav{gap:2.5vw 4vw}
  .fc-nav a{font-size:3.2vw}
  .site-credit{font-size:3vw;gap:2vw}
  .shifra-logo-wrap{--shifra-size:22px}

  .hero-actions .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .testi-marquee{overflow-x:auto}          /* manual scroll when motion is off */
  .shifra-letter{transform:none!important}
  .shifra-star{transform:scale(1) rotate(0deg)!important}
}