/* RAKEZ VAS — Version C "Film" (2026-11-11). Loads after vas.css (shared drawer, request bar, search).
   Quiet palette: white, Sapphire type, Emerald hairlines. Yellow only on buttons, as the brand rule says.
   The pictures and films carry the colour. */
.vas.film{--hair:#0e3a5c26}
.f-sec{padding:clamp(72px,9vw,140px) 0;position:relative}
.f-kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:12px}
.f-kicker::before{content:"";width:36px;height:2px;background:var(--em)}
.f-kicker.dark{color:var(--sa)}
.vas .f-h{font-size:clamp(34px,4.6vw,68px);line-height:1.02;font-weight:300;letter-spacing:-.015em;margin:18px 0 0;max-width:17em;text-wrap:balance}
.vas .f-h b{font-weight:700}
.f-note{font-size:14px;color:var(--ink);margin-top:22px}
.f-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0e3a5cf2 0%,#0e3a5cc7 45%,#0e3a5c73 100%)}
.f-shade.low{background:linear-gradient(0deg,#0e3a5ce6 0%,#0e3a5c40 55%,#0e3a5c00 100%)}
.f-pause{background:transparent;border:1px solid #ffffff80;color:#fff;font-size:14px;font-weight:700;padding:8px 14px;min-height:40px;letter-spacing:.04em}
.f-pause:hover{background:#fff;color:var(--sa)}
.f-link{background:none;border:0;border-bottom:2px solid var(--em);color:var(--sa);font-weight:700;font-size:17px;padding:8px 0;min-height:44px;text-align:left}
.f-link:hover{border-color:var(--sa)}

/* ---------- hero ---------- */
.f-hero{position:relative;min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--sa);overflow:hidden}
.f-hero .f-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-hero-in{position:relative;width:100%;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(36px,5vw,64px)}
.vas .f-hero h1{color:#fff;font-size:clamp(42px,6.4vw,104px);line-height:.98;font-weight:300;letter-spacing:-.02em;margin:22px 0 0}
.vas .f-hero h1 span{display:block;font-weight:700;white-space:normal}
.f-hero .v-search{box-shadow:none;margin-top:36px}
.f-facts{position:relative;width:100%;display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,72px);align-items:center;padding-top:22px;padding-bottom:26px;border-top:1px solid #ffffff40}
.f-facts div{display:flex;align-items:baseline;gap:12px}
.f-facts b{font-size:clamp(30px,3vw,44px);font-weight:300;line-height:1}
.f-facts span{font-size:16px;color:#dcedf3}
.f-facts .f-pause{margin-left:auto}

/* ---------- one ordinary day ---------- */
.f-day-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);margin-top:clamp(36px,5vw,72px);align-items:start}
.f-stage{position:sticky;top:104px;height:min(calc(100vh - 150px),680px);overflow:hidden;background:var(--sa)}
.f-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s,transform 6s ease-out}
.f-stage img.on{opacity:1;transform:scale(1)}
.f-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e3a5cb3,#0e3a5c00 45%)}
.f-clock{position:absolute;left:28px;bottom:22px;z-index:1;color:#fff;font-size:clamp(56px,7vw,112px);font-weight:300;line-height:1;letter-spacing:-.02em;display:flex;align-items:flex-end;gap:16px}
.f-clock i{width:64px;height:2px;background:var(--em);margin-bottom:.22em}
.f-chapters article{min-height:68vh;display:flex;flex-direction:column;justify-content:center;gap:12px;border-top:1px solid var(--hair);padding:40px 0;opacity:.3;transition:opacity .5s}
.f-chapters article.on{opacity:1}
.f-chapters article img{display:none}
.f-chapters .t{font-size:15px;font-weight:700;letter-spacing:.16em;color:var(--sa2)}
.vas .f-chapters h3{font-size:clamp(30px,3.2vw,48px);line-height:1.04;font-weight:700}
.f-chapters p{font-size:19px;line-height:1.5;color:var(--ink);max-width:24em}
.f-chapters .f-link{align-self:flex-start;margin-top:8px}

/* ---------- film band ---------- */
.f-film{position:relative;height:min(82vh,760px);background:var(--sa);color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.f-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-film .v-wrap{position:relative;width:100%;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;padding-bottom:clamp(32px,5vw,64px)}
.vas .f-film h2{color:#fff;font-size:clamp(36px,5.4vw,84px);line-height:1;font-weight:300;letter-spacing:-.02em}
.vas .f-film h2 b{font-weight:700}

/* ---------- index ---------- */
.f-tabs{display:flex;flex-wrap:wrap;gap:6px 26px;margin:36px 0 8px}
.f-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--sa2);font-weight:700;font-size:17px;padding:10px 0;min-height:44px}
.f-tabs button[aria-pressed=true]{color:var(--sa);border-color:var(--em)}
.f-list{border-bottom:1px solid var(--hair)}
.f-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 40px;gap:20px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--hair);padding:20px 0;color:var(--sa);position:relative;transition:padding .3s,background .3s}
.f-row[hidden]{display:none}
.f-row .no{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--sa2)}
.f-row .nm{font-size:clamp(22px,2.3vw,34px);font-weight:300;line-height:1.05;transition:font-weight .1s}
.f-row .ds{font-size:16px;line-height:1.4;color:var(--ink)}
.f-row .go{justify-self:end;width:22px;height:22px;transition:transform .3s}
.f-row .go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.f-row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--em);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.f-row:hover,.f-row:focus-visible{padding-left:14px}
.f-row:hover::after,.f-row:focus-visible::after{width:100%}
.f-row:hover .nm,.f-row:focus-visible .nm{font-weight:700}
.f-row:hover .go{transform:translate(4px,-4px)}
.f-row.in .no::after{content:" ✓";color:#00777a}
.f-peek{position:fixed;left:0;top:0;width:300px;height:200px;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .25s,transform .25s;overflow:hidden;box-shadow:0 30px 60px -24px #0e3a5c99}
.f-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.f-peek img{width:100%;height:100%;object-fit:cover;display:block}
.f-how{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px)}
.f-how li{display:flex;gap:16px;align-items:flex-start;border-top:2px solid var(--em);padding-top:18px}
.f-how b{font-size:44px;font-weight:300;line-height:.9}
.vas .f-how span{font-size:18px;line-height:1.4}

/* ---------- reels + quote ---------- */
.f-reels{background:var(--wash)}
.f-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(20px,5vw,56px) 12px;margin-top:clamp(32px,4vw,56px);scrollbar-width:thin}
.f-strip figure{flex:0 0 min(78vw,640px);margin:0;scroll-snap-align:center}
.f-strip video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sa)}
.f-strip figcaption{font-size:15px;font-weight:700;letter-spacing:.06em;padding:12px 0;border-bottom:2px solid var(--em);display:inline-block}
.f-quote{margin-top:clamp(48px,6vw,96px)}
.f-quote blockquote{margin:0;max-width:60em}
.vas .f-quote blockquote p{font-size:clamp(34px,5vw,76px);line-height:1.02;font-weight:300;letter-spacing:-.02em}
.f-quote blockquote p::before{content:"“"}.f-quote blockquote p::after{content:"”"}
.f-quote cite{display:block;font-style:normal;font-size:17px;margin-top:18px;color:var(--ink)}
.f-quote cite b{color:var(--sa)}
.f-quote ul{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px)}
.f-quote li{border-top:1px solid var(--sa);padding-top:16px;display:grid;gap:8px}
.f-quote li b{font-size:28px;line-height:1}
.vas .f-quote li span{font-size:16px;line-height:1.45;color:var(--ink)}

/* ---------- offers ---------- */
.f-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,56px)}
.f-cards article{border:1px solid var(--hair);border-top:3px solid var(--em);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;transition:box-shadow .3s,transform .3s}
.f-cards article:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px #0e3a5c80}
.f-cards .k{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sa2)}
.vas .f-cards h3{font-size:clamp(26px,2.6vw,38px);line-height:1.04}
.f-cards p{font-size:17px;line-height:1.5;color:var(--ink);max-width:28em}
.f-cards .p{display:flex;align-items:baseline;gap:14px;margin-top:auto;padding-top:14px}
.f-cards .p s{font-size:18px;color:var(--ink)}
.f-cards .p b{font-size:clamp(36px,3.6vw,52px);font-weight:300;line-height:1}
.f-cards .v-btn{align-self:flex-start}

/* ---------- closing ---------- */
.f-close{position:relative;min-height:min(70vh,620px);display:flex;align-items:center;color:#fff;background:var(--sa);overflow:hidden}
.f-close>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-close .v-wrap{position:relative;width:100%;padding-top:64px;padding-bottom:64px}
.vas .f-close h2{color:#fff;font-size:clamp(44px,6.4vw,104px);line-height:.98;font-weight:700;letter-spacing:-.02em}
.f-close p{font-size:21px;margin-top:14px;color:#e6f2f6}
.f-close .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.f-close .v-btn.ghost{color:#fff}

/* film version keeps the drawer quiet too */
body[data-film] .v-drawer-head{background:var(--sa)!important;color:#fff!important}
body[data-film] .v-earn{display:none}

@media(max-width:1000px){
  .f-day-grid{grid-template-columns:1fr}
  .f-stage{display:none}
  .f-chapters article{min-height:0;opacity:1;padding:32px 0}
  .f-chapters article img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:8px}
  .f-row{grid-template-columns:44px minmax(0,1fr) 28px;gap:12px}
  .f-row .ds{display:none}
  .f-how,.f-quote ul,.f-cards{grid-template-columns:1fr}
  .f-peek{display:none}
}
@media(max-width:640px){
  .f-facts .f-pause{margin-left:0}
  .f-facts{gap:14px 28px}
}
@media(prefers-reduced-motion:reduce){.f-stage img{transition:none;transform:none}}